react-match-media

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

!alt tag

Usage

$3

``
npm i react-match-media
`

$3

`javascript
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(

,
document.getElementById('root')
)
`
For more, see the examples

$3

- 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

$3

`
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

$3

`
npm run lint
`

$3

`
npm run test
`

$3

`
npm run build
`

$3

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.

$3

MIT