Using Media Queries in React

index.js

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