Usage

You just pass in the query that you want to be listening and render your components accordingly.

js
import React, { Component } from 'react'
import MatchMedia from 'react-micro-match-media'

const App = () => (
  (max-width: 600px)}>
    {matches => {
      if (matches) return 'will be rendered if viewport is <= 600'
      return 'will be rendered if viewport is > 600'
    }}
  
)
`

Smart usage

You can also do things like:

`js
import React, { Component } from 'react'
import MatchMedia from 'react-micro-match-media'

const Portrait = ({ children, ...props }) => (
  (orientation: portrait)}>
    {isPortrait => (isPortrait ? children : null)}
  
)

const App = () => (
  will render only if orientation is portrait
)
``

`react-micro-match-media`

> zero dependencies, ~1kb render prop wrapper of window.matchMedia

`Instalation`

``bash $ 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.

`js import React, { Component } from 'react' import MatchMedia from 'react-micro-match-media'

const App = () => ( (max-width: 600px)}> {matches => { if (matches) return 'will be rendered if viewport is <= 600' return 'will be rendered if viewport is > 600' }} ) `

`Smart usage`

You can also do things like:

`js import React, { Component } from 'react' import MatchMedia from 'react-micro-match-media'

const Portrait = ({ children, ...props }) => ( (orientation: portrait)}> {isPortrait => (isPortrait ? children : null)} )

const App = () => ( will render only if orientation is portrait ) ``