react-slim-media-query
A really lightweight CSS media query component for React (1640B GZipped).
Usage
MediaQuery is a wrapper component that will render its children if the provided media query will match. There are 2 ways to specify the query:
- Sending a
queryprop containg a CSS like media query. - Sending specific props like
minWidth,maxWidthetc. These can be numbers or strings. The current supported features are:minAspectRatio,maxAspectRatio,minDeviceAspectRatio,maxDeviceAspectRatio,minHeight,maxHeight,minDeviceHeight,maxDeviceHeight,minWidth,maxWidth,minDeviceWidth,maxDeviceWidth,minColor,maxColor,minColorIndex,maxColorIndex,minMonochrome,maxMonochrome,minResolution,maxResolution.
import MediaQuery from 'react-slim-media-query'; const App = <div> <MediaQuery => <div>The width should be 1000 or higher</div> </MediaQuery> <MediaQuery ="1000px"> <div>The width should be 1000 or higher</div> </MediaQuery> <MediaQuery => <div>The width should be 800 or less</div> </MediaQuery> <MediaQuery ="800px"> <div>The width should be 800 or less</div> </MediaQuery> <MediaQuery ="(max-device-width: 800px)"> <div>The width should be 800 or less</div> </MediaQuery> </div>; Server Side Rendering
When rendered on server the query will always match. In order to override this behaviour you can set an initial state.
import MediaQuery from 'react-slim-media-query'; const App = <div> <MediaQuery = => <div>I should be visible when rendered on the server</div> </MediaQuery> </div>;