@hocs/with-match-media-props

CSS Media Queries HOC for React

Stats

StarsIssuesVersionUpdatedCreatedSize
@hocs/with-match-media-props
1,786180.4.03 years ago4 years agoMinified + gzip package size for @hocs/with-match-media-props in KB

Readme

:left_right_arrow: with-match-media-props

npm ci coverage deps

Part of a collection of Higher-Order Components for React, especially useful with Recompose.

Dynamically map CSS Media Queries matches to boolean props using window.matchMedia() (Can I use?).

Install

yarn add @hocs/with-match-media-props

Usage

withMatchMediaProps(
  mediaMatchers: {
    [propName: string]: Object
  }
): HigherOrderComponent

Where media matcher value is json2mq object.

import React from 'react';
import withMatchMediaProps from '@hocs/with-match-media-props';

const Demo = (props) => (
  <h1>props: {JSON.stringify(props)}</h1>
  // props: {"isSmallScreen":false,"isRetina":true}
);

export default withMatchMediaProps({
  isSmallScreen: {
    maxWidth: 500
  },
  isHighDpiScreen: {
    minResolution: '192dpi'
  }
})(Demo);

:tv: Check out live demo.

Notes

  • You still might need a polyfill but I can't find any.
  • Target Component will be just passed through on unsupported platforms (i.e. global.matchMedia is not a function) like IE9, JSDOM (so Jest as well) or with Server-Side Rendering. This means that there will be no boolean props (i.e. undefined) which might be expected, but you can take care of it using Recompose defaultProps HOC if it's really necessary.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.