react-micro-match-media
zero dependencies, ~1kb render prop wrapper of window.matchMedia
Instalation
$ npm install --save react-micro-match-media
Peer dependencies
This package expect react@^16.3.0
as a peer dependency.
Usage
You just pass in the query that you want to be listening and render your components accordingly.
const App = <MatchMedia query=`(max-width: 600px)`> { if matches return 'will be rendered if viewport is <= 600' return 'will be rendered if viewport is > 600' } </MatchMedia>
Smart usage
You can also do things like:
const Portrait = <MatchMedia ...props query=`(orientation: portrait)`> isPortrait ? children : null </MatchMedia> const App = <Portrait>will render only if orientation is portrait</Portrait>