react-media-query-hoc  !NPM Version Badge

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
- Small bundlephobia
- Uses css-mediaquery which parses and determines if a given CSS Media Query
matches a set of values (used for server side rendering).
- You want specific react components being mounted and rendered based on media types

Why not use this?

We generally recommend using vanilla CSS media queries to build responsive websites, this is simpler, provides a smoother UX, also it mitigates having to guess the screen width during server side rendering.
Use this library if you need to dramatically alter the page layout between media types (some examples include: an experiment needs to be run on a specific screen width or an advertisement needs to be on specific screen width).

Install

Via NPM:
``bash
npm install react-media-query-hoc --save
`

Via Yarn:
`bash
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

$3

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

Usage:

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

const App = (props) => {
return (



);
};

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:

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

return (



);
};
`

$3

This is a HOC to provide media match props to your component.

Usage:
`javascript
import { withMedia } from 'react-media-query-hoc';

const MyComponent = ({ media, ...props}) => {
if (media.tablet || media.mobile) {
return (


)
}

return (

Other View

);
};

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

Components wrapped by withMedia() won't work with React's usual ref mechanism, because the ref supplied will be for withMedia rather than the wrapped component. Therefore a prop, wrappedRef provides the same function. Note: this means the wrapped component can not be a stateless function.

$3


This is the React Context exported and ready to be used with React useContext hook. It has a default value of {}, present when the component that consumes the context is not wrapped with MediaQueryProvider.

`javascript
import { MediaContext } from 'react-media-query-hoc';
import { useContext } from 'react';

const MyComponent = (props) => {
const media = useContext(MediaContext);

if(media.tablet || media.mobile) {
return (


)
}

return (

Other View

);
};

export default MyComponent;

// default value
ReactDOM.render(); // Renders 'Other View';
`

$3

You can pass in media features from your server, all supported values can be found here.

Usage (matches mobile screen during SSR):
`javascript
const App = (props) => {
const values = {
width: 300,
type: 'screen',
};

return (



);
};
`

#### React 16 ReactDOM.hydrate

It's very important to realise a server client mismatch is dangerous when using hydrate in React 16, ReactDOM.hydrate
can cause very strange html on the client if there is a mismatch.
To mitigate this we use the two-pass rendering technique mentioned in the React docs.
We render on the client in the first pass using values with css-mediaquery used on the server, then we use the browsers native window.matchMedia
to get it's actual dimensions and render again if it causes different query results. This means there should be no React
server/client mismatch warning in your console and you can safely use hydrate. As a result of above, if you are server side rendering and using ReactDOM.hydrate you must supply MediaQueryProvider a values prop.

Browser Support

The oldest browser we support is IE11,
if you want to support even older browsers please make sure you are using a polyfill for Map such as babel-polyfill.

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:

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

Then in your React tests you can import like:
`javascript
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?