contra/react-responsive — Media queries in react for responsive design #reactjs

contra/react-responsive 
 — Media queries in react for responsive design 

#reactjs

  • For a list of all possible shorthands and value types see numbers given as a shorthand will be expanded to px ( will become )

    You may also specify a function for the child of the MediaQuery component.

  • When the component renders, it is passed whether or not the given media query matches.
  • You may specify an optional property on the that indicates what component to wrap children with.
  • If the property is not defined and the has more than 1 child, a will be used as the “wrapper” component by default.
  • The values property can contain , , , , , , , , , , , and to be matched against the media query.

react-responsive – Media queries in react for responsive design

@_kud: contra/react-responsive
— Media queries in react for responsive design

#reactjs

The best supported, easiest to use react media query module.

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 all just works.

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

var MediaQuery = require(‘react-responsive’); var A = React . createClass({ render: function(){ return (

Device Test!

You are a desktop or laptop

You also have a huge screen

You are sized like a tablet or mobile phone though

You are a tablet or mobile phone

You are portrait

You are landscape

You are retina

); } });

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

var MediaQuery = require(‘react-responsive’); var A = React . createClass({ render: function(){ return (

Device Test!

You are a desktop or laptop

You also have a huge screen

You are sized like a tablet or mobile phone though

You are a tablet or mobile phone

You are portrait

You are landscape

You are retina

); } });

{ (matches) => { if (matches) { return

Media query matches!

; } else { return

Media query does not match!

; } } }

prop is not defined and there is only 1 child, that child will be rendered alone without a component wrapping it.

  • Item 1
  • Item 2
  • // renders the following when the media query condition is met

    • Item 1
    • Item 2

    Unwrapped component

    // renders the following when the media query condition is met

    Unwrapped component

    Wrapped
    Content

    // renders the following when the media query condition is met

    Wrapped
    Content

    property.

    to be matched against the media query.

    var MediaQuery = require(‘react-responsive’); var A = React . createClass({ render: function(){ return (

    Device Test!

    You are a desktop or laptop

    You also have a huge screen

    You are sized like a tablet or mobile phone though

    You are a tablet or mobile phone

    You are portrait

    You are landscape

    You are retina

    ); } });

    import Responsive from ‘react-responsive’; // Desktop, tablet and mobile setup const Desktop = ({ children }) => ; const Tablet = ({ children }) => ; const Mobile = ({ children }) => ; // Default (desktop, tablet) and mobile setup const Default = ({ children }) => ; const Mobile = ({ children }) => ; const Example = () => (

    You are a desktop or laptop< /Desktop> You are a tablet< /Tablet> You are a mobile phone< /Mobile> You are not a mobile phone< /Default> You are a mobile phone< /Mobile> < /div> ); export default Example;

    Pretty much everything. Check out these polyfills:

    GitHub