CSS Media Queries HOC for React

Downloads in past


0.4.04 years ago5 years agoMinified + gzip package size for @hocs/with-match-media-props in KB


:leftrightarrow: 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?).


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


  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'

:tv: Check out live demo.


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