React Match Media

A React component that allows you to conditionally render your components based on media queries for your responsive website.

Underline it uses window.matchMedia

Usage

Install

npm i react-match-media 

Use it in your code (es6 syntax)

import React from 'react'; import ReactDOM from 'react-dom'; import { MatchMediaHOC } from 'react-match-media';  const ComponentForBigScreen = MatchMediaHOC(SomeComponent, '(min-width: 800px)'); const ComponentForSmallScreen = MatchMediaHOC(SomeComponent, '(max-width: 500px)');  ReactDOM.render(   <div className="example">     <SomeElementAlwaysRendered />     <ComponentForBigScreen />     <ComponentForSmallScreen />   </div>,   document.getElementById('root') )

For more, see the examples

Supported browsers

• IE10 and above
• All other major browsers

For older browsers, you need to polyfill window.matchMedia. For more, see Can I Use matchMedia

Development of this component

Start the example

npm install npm start open http://localhost:3000 

And then you can edit the source code, hotreloading is enabled, so you can see the changes immediatly

Linting

npm run lint 

Testing

npm run test 

To generate distribution code

npm run build 

Changelog

v2.2.0 - 25/April/2018

Used PropTypes from 'prop-types' package

v2.0.0 - 16/Jan/2017

Introduced a MatchMediaHOC high order component to replace the previous MatchMedia component.

License

MIT