A dead simple React Higher Order Component (HOC) that uses context for matching media queries
- 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)
Via NPM:
npm install react-media-query-hoc --save
Via Yarn:
yarn add react-media-query-hoc
This library is designed so that you have 1 MediaQueryProvider
parent and 1-many child components wrapped with withMedia
HOC
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>
);
};
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);
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>
);
};
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
Big thanks to the maintainers of these repos
Both libraries are a bit similar, but my original use case required the extra advantages listed in Why use this?