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