Package Exports

react-responsive

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-responsive) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-responsive

Information

Package	react-responsive
Description	Media queries in react for responsive design
Browser Version	>= IE6*

This module is pretty straightforward: You specify a set of requirements, and the children will be rendered if they are met. Also handles changes so if you resize or flip or whatever it will all be cool.

Usage

A mq element functions like any other React component, which means you can nest them and do all the normal jazz.

Using CSS Media Queries

var mq = require('react-responsive');

var A = React.createClass({
  render: function(){
    return (
      <div>
        <div>Device Test!</div>
        <mq query='(min-device-width: 1224px)'>
          <div>You are a desktop or laptop</div>
          <mq query='(min-device-width: 1824px)'>
            <div>You also have a huge screen</div>
          </mq>
          <mq query='(max-width: 1224px)'>
            <div>You are sized like a tablet or mobile phone though</div>
          </mq>
        </mq>
        <mq query='(max-device-width: 1224px)'>
          <div>You are a tablet or mobile phone</div>
        </mq>
        <mq query='(orientation: portrait)'>
          <div>You are portrait</div>
        </mq>
         <mq query='(orientation: landscape)'>
          <div>You are landscape</div>
        </mq>
        <mq query='(min-resolution: 2dppx)'>
          <div>You are retina</div>
        </mq>
      </div>
    );
  }
});

Using Properties

To make things more idiomatic to react, you can use camelcased shorthands to construct media queries.

For a list of all possible shorthands and value types see https://github.com/wearefractal/react-responsive/blob/master/src/mediaQuery.js#L9

Any numbers given as a shorthand will be expanded to px (1234 will become '1234px')

var mq = require('react-responsive');

var A = React.createClass({
  render: function(){
    return (
      <div>
        <div>Device Test!</div>
        <mq minDeviceWidth={1224}>
          <div>You are a desktop or laptop</div>
          <mq minDeviceWidth={1824}>
            <div>You also have a huge screen</div>
          </mq>
          <mq maxWidth={1224}>
            <div>You are sized like a tablet or mobile phone though</div>
          </mq>
        </mq>
        <mq maxDeviceWidth={1224}>
          <div>You are a tablet or mobile phone</div>
        </mq>
        <mq orientation='portrait'>
          <div>You are portrait</div>
        </mq>
         <mq orientation='landscape'>
          <div>You are landscape</div>
        </mq>
        <mq minResolution='2dppx'>
          <div>You are retina</div>
        </mq>
      </div>
    );
  }
});

Browser Support

Out of the box

Chrome	9
Firefox (Gecko)	6
Internet Explorer	10
Opera	12.1
Safari	5.1

With Polyfills

Pretty much everything. Check out these polyfills: