react-matchqueries
Library to control the design of your application using media queries 🔥
Install
Via NPM:
npm install react-matchqueries --save
Via Yarn:
yarn add react-matchqueries
Usage
MatchQueriesProvider
; const queries = isMobile: 'screen and (max-width: 767px)' isTablet: 'screen and (min-width: 768px) and (max-width: 1023px)' isDekstopS: 'screen and (min-width: 1024px) and (max-width: 1365px)' isDekstop: 'screen and (min-width: 1366px) and (max-width: 1440px)' isDekstopL: 'screen and (min-width: 1441px)' const Route = <MatchQueriesProvider queries=queries> <MyApp /> </MatchQueriesProvider>;
MatchQueriesConsumer
; const MyApp = <MatchQueriesConsumer> <> isDekstopS || isDekstop || isDekstopL && <p>Desktop View</p> isTablet || isMobile && <p>Tablet and Mobile View</p> </> </MatchQueriesConsumer>;
Server Side Rendering
You can pass in media features from your server, all supported values can be found here.
Usage (matches mobile screen during SSR):
; const Route = { const values = width: 300 type: 'screen' ; return <MatchQueriesProvider values=values> <MyApp /> </MatchQueriesProvider> ;};
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 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 MatchQueriesConsumer
a values
prop.