@globocom/with-match-media-props

with-match-media-props

CSS Media Queries detection HOC for React

Install

npm install --save with-match-media-props

Usage

import React, { Component } from 'react'

import withMatchMediaProps from 'with-match-media-props'

const MyComponent = (props) => (
  <pre>{JSON.stringify(props, null, 4)}</pre>
)
const MyComponentWithMatchMedia = withMatchMediaProps({
  'screen and (min-width: 360px)': {
    mediaQuery: 360,
    mediaQuery360: '✅',
  },
  'screen and (min-width: 768px)': {
    mediaQuery: 768,
    mediaQuery768: '✅',
  },
})(MyComponent)

class Example extends Component {
  render () {
    return (
      <MyComponentWithMatchMedia mediaQuery={1} otherProps="example" />
    )
  }
}

License

MIT © globocom