React hook used for matching media queries.
It uses browser's window.matchMedia.
With SSR support 🚀
$ yarn add react-simple-matchmediaor
$ npm i react-simple-matchmedia
| media | value |
|---|---|
| phone | (min-width: 320px) and (max-width: 568px) |
| tablet | (min-width : 768px) and (max-width : 1024px) |
| desktop | (min-width : 1224px) |
import useReactSimpleMatchMedia from 'react-simple-matchmedia'
const MediaQueryComponent = () => {
const matched = useReactSimpleMatchMedia('phone');
return (
<Fragment>
{ matched && <div>I am only visible and rendered in DOM on phone screen!</div>}
</Fragment>
);
}
import useReactSimpleMatchMedia from 'react-simple-matchmedia'
const MediaQueryComponent = () => {
const matched = useReactSimpleMatchMedia('(min-width: 600) and (max-width: 1200px)');
return (
<Fragment>
{ matched && <div>I am only visible and rendered in DOM between 600px and 1200px</div>}
</Fragment>
);
}
Enjoy and have fun!