Last active
August 12, 2016 01:55
-
-
Save josefbetancourt/2d597dfda3e51214af91fe0fcb850240 to your computer and use it in GitHub Desktop.
Using Media Queries in React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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