React hook
used for matching media queries.
It uses browser's window.matchMedia
.
With SSR support ๐
$ yarn add react-simple-matchmedia
or
$ 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!