Create a gist now

Instantly share code, notes, and snippets.

Using Media Queries in React
import React from 'react';
import {render} from 'react-dom';
import "babel-polyfill";
import invariant from "invariant";
/**
* A P P
*
*/
var App = React.createClass({
/**
* Array of objects to contain the mediaQueryLists objects
*
* Each object is composed of:
* {
* mql: mediaQueryList,
* listener: function
} }
*
*/
mediaQueryLists : [],
/**
* Simple demo, dumps State to UI.
*/
render: function(){
return(
<div id="main" style={{padding:'4em'}}>
<h1 className="disclaimer">Change size of browser to test</h1>
<h2>{`state: ${JSON.stringify(this.state,null,2)}`}</h2>
</div>
);
},
/**
*
*/
componentDidMount : function(){
var obj = {}; // obj to use for passing mql to List of mql.
// TODO: these CSS strings should come from properties
this.mediaQueryFactory(obj, '(orientation: portrait)', this.onPortrait);
this.mediaQueryLists.push({
mql: obj.mql,
listener: this.onPortrait
});
this.mediaQueryFactory(obj, '(orientation: landscape)', this.onLandscape);
this.mediaQueryLists.push({
mql: obj.mql,
listener: this.onLandscape
});
this.mediaQueryFactory(obj, '(max-width: 767px)', this.onXS);
this.mediaQueryLists.push({
mql: obj.mql,
listener: this.onXS
});
this.mediaQueryFactory(obj, '(min-width:768px) and (max-width: 992px)', this.onSM);
this.mediaQueryLists.push({
mql: obj.mql,
listener: this.onSM
});
this.mediaQueryFactory(obj, '(min-width:993px) and (max-width: 1199px)', this.onMD);
this.mediaQueryLists.push({
mql: obj.mql,
listener: this.onMD
});
this.mediaQueryFactory(obj, 'screen and (min-width:1200px)', this.onLG);
this.mediaQueryLists.push({
mql: obj.mql,
listener: this.onLG
});
},
/**
*
*/
componentWillUnMount : function(){
this.mediaQueryLists.forEach( (mql) => {
mql.mql.removeListener(mql.listener);
});
this.mediaQueryLists.length = 0; // clear the array.
},
/**
* Responsive media support
*
* Create mediaQueryList object.
*
* See http://devdocs.io/dom/window/matchmedia
* See https://github.com/weblinc/media-match
*
* @param obj - obj to store the new mql
* @param String query - the CSS query
* @param func - the callBack function
* @return nothing
*/
mediaQueryFactory : function(obj, query, func){
var mql = window.matchMedia(query);
var listener = function(x){
func(x.matches);
}
mql.addListener(listener);
listener(mql);
obj.mql = mql;
},
/**
*/
onPortrait : function(flag){
if(flag){
this.setState({orientation: 'portrait'});
}
},
/**
*/
onLandscape : function(flag){
if(flag){
this.setState({orientation: 'landscape'});
}
},
/**
*/
onXS : function(flag){
if(flag){
this.setState({breakPoint:'XS'});
}
},
/**
*/
onSM : function(flag){
if(flag){
this.setState({breakPoint:'SM'});
}
},
/**
*/
onMD : function(flag){
if(flag){
this.setState({breakPoint:'MD'});
}
},
/**
*/
onLG : function(flag){
if(flag){
this.setState({breakPoint:'LG'});
}
},
});
/*
* Render the app on the page.
*/
render(<App />, document.getElementById('root'));
// end of index.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment