react-simple-matchmedia

!install size

React hook used for matching media queries.
It uses browser's window.matchMedia.
With SSR support :rocket:

$3

``sh
$ yarn add react-simple-matchmedia
`

or

`sh
$ npm i react-simple-matchmedia
`

$3

![Edit hopeful-jennings-cho5q](https://codesandbox.io/s/hopeful-jennings-cho5q?fontsize=14)


#### Pre-defined media queries:

| media | value |
| ------ | ------ |
| phone | (min-width: 320px) and (max-width: 568px) |
| tablet | (min-width : 768px) and (max-width : 1024px) |
| desktop | (min-width : 1224px) |


#### With pre-defined query:
`
import useReactSimpleMatchMedia from 'react-simple-matchmedia'

const MediaQueryComponent = () => {
const matched = useReactSimpleMatchMedia('phone');

return (

{ matched &&

}

);
}

`

$3


`
import useReactSimpleMatchMedia from 'react-simple-matchmedia'

const MediaQueryComponent = () => {
const matched = useReactSimpleMatchMedia('(min-width: 600) and (max-width: 1200px)');

return (

{ matched &&

I am only visible and rendered in DOM between 600px and 1200px

}

);
}

``

###

Enjoy and have fun!