with-match-media-props

↔️ with-match-media-props

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);

📺 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.