Responsive Media Query Component

Better manage alternate layouts (like desktop/tablet/mobile) with no explicit connection between the media query details and the alternate views.

Example from Capital One's React web app.

The first component is MediaQuery. This lets you set any media queries allows you to set the media query. By default it uses just a desktop and mobile setting. When the screen resizes, the children components will render the corresponding view for that layout.

The second component, Responsive, allow you to switch between completely different views with no explicit data passed down.

Example

import {Responsive, MediaQuery} from ResponsiveMediaQuery

var App = React.createClass({
  render(){
    /* MediaQuery defaults to
      <MediaQuery query={{
          mobile:"(min-width:768px)",
          desktop:"(min-device-width:320px) and (max-width:767px)"}} > */
    return (<MediaQuery>
      <MiddleMan />
    </MediaQuery>)
  }
});

var MiddleMan = React.createClass({
  render(){
    return (<div>
      <h1>Middle Man Component</h1>
      <ResponsiveChildComponent text="Hello World" />
      </div>)
  }
})

var ResponsiveChildComponent = React.createClass({
  getDefaultProps(){
    return {text:'default'};
  },
  render(){
    const MobileView = ({text}) => (<h5>{`mobile ${text}`}</h5>);
    const DesktopView = ({text}) => (<h2>{`desktop ${text}`}</h2>);

    return <Responsive {..this.props} mobile={MobileView} desktop={DesktopView} />
  }
});

ReactDOM.render(<App />, document.querySelector('#app'));

How is works

The parent component, MediaQuery, adds a listener to window resize only once for the entire app. On mount and resize request it will check the media queries and update them only if there is a change. All the children that use the Responsive component will be trigger whenever it changes.

Advanced use

The MediaQuery component has a query prop that can be whatever media query you would like to trigger.

import {Responsive, MediaQuery} from ResponsiveMediaQuery

var App = React.createClass({
  render(){
    return (<MediaQuery query={{
              watch:"max-device-width:319px",
              mobile:"min-device-width:320px",
              table:"min-device-width:640px",
              desktop:"min-width: 1025px"}}>
      <ResponsiveChildComponent text="my title" />
    </MediaQuery>)
  }
});

var ResponsiveChildComponent = React.createClass({
  getDefaultProps(){
    return {text:'default'};
  },
  render(){
    const WatchView = ({text}) => (<span>{`watch ${text}`}</span>);
    const MobileView = ({text}) => (<h5>{`mobile ${text}`}</h5>);
    const TabletView = ({text}) => (<h4>{`tablet ${text}`}</h4>);
    const DesktopView = ({text}) => (<h2>{`desktop ${text}`}</h2>);

    return <Responsive
      {..this.props}
      watch={WatchView}
      mobile={MobileView}
      tablet={TabletView}
      desktop={DesktopView} />
  }
});

ReactDOM.render(<App />, document.querySelector('#app'));

What not to do

This is only v1. Don't mix and match multiple MediaQuery components. Just one in the app so other will pick it up. More features will be added as needed/requested.