react-media-query-hoc

react-media-query-hoc

A dead simple React Higher Order Component (HOC) that uses context for matching media queries

Why use this?

• A simple API which doesnt require you to put MediaQuery components all over your code base
• More performant (you only need 1 parent MediaQueryProvider that listens to media events you wish to configure)
• Easier to test than other react media query libraries
• Uses matchmedia for media queries for client and server
• Abstracted away React context which is experimental (and subject to change)

Install

Via NPM:

npm install react-media-query-hoc --save

Via Yarn:

yarn add react-media-query-hoc

Usage

This library is designed so that you have 1 MediaQueryProvider parent and 1-many child components wrapped with withMedia HOC

MediaQueryProvider

This component will listen to media events you want to configure, it should be used once as a parent component

Usage:

import { MediaQueryProvider } from 'react-media-query-hoc';

const App = (props) => {
  return (
    <MediaQueryProvider>
      <TheRestOfMyApp />
    </MediaQueryProvider>
  );
};

export default App;

By providing no queries prop to the MediaQueryProvider component, it will default to these media queries

But you can provide different media queries for your use case using the queries prop, eg:

const App = (props) => {
  const customQueries = {
    verySmall: 'screen and (max-width: 300px)',
    someOtherMediaQuery: 'screen and (min-width: 301px)',
  };

  return (
    <MediaQueryProvider queries={customQueries}>
      <TheRestOfMyApp />
    </MediaQueryProvider>
  );
};

withMedia

This is a HOC to provide media match props to your component. This abstracts away context so that if there is any changes to the API in the future its easier to upgrade (see: React Context)

Usage:

import { withMedia } from 'react-media-query-hoc';

const MyComponent = ({ media, ...props}) => (
  if(media.tablet || media.mobile) {
    ..
    return (
      <div>
        Mobile and Tablet View
      </div>
    )
  }

  return (
    <div>
      Other View
    </div>
  )
);

export const BaseMyComponent = MyComponent;
export default withMedia(MyComponent);

Server Side Rendering

You can pass in media features from your server, all supported values can be found here: https://www.w3.org/TR/css3-mediaqueries/#media1

Usage (matches mobile screen during SSR):

const App = (props) => {
  const values = {
    width: 300,
    type: 'screen',
  };

  return (
    <MediaQueryProvider values={values}>
      <TheRestOfMyApp />
    </MediaQueryProvider>
  );
};

Testing Components

Because the media queries and context are abstracted out you can easily test components with or without the withMedia HOC, just ensure you export your component base without the HOC as well, eg:

export const BaseMyComponent = MyComponent;
export default withMedia(MyComponent);

Then in your React tests you can import like:

import { BaseMyComponent } from 'location_of_my_component';

And unit test the component without having to worry about context

Thanks

Big thanks to the maintainers of these repos

• https://github.com/jxnblk/react-media-context
• https://github.com/contra/react-responsive

Both libraries are a bit similar, but my original use case required the extra advantages listed in Why use this?