React hook for testing and monitoring media queries.
$ npm install --save react-use-media
Additionally, you'll need to install version 16.7.0-alpha.0
of react
and
react-dom
since this package relies on
React Hooks:
$ npm install --save [email protected] [email protected]
DISCLAIMER: React Hooks are an experimental proposal. The Hooks API, as well as this library's, are unstable and subject to change.
import React from 'react';
import useMedia from 'react-use-media';
function MyComponent() {
const matches = useMedia('(max-width: 599px)');
return matches ? (
<p>The document is less than 600px wide.</p>
) : (
<p>The document is at least 600px wide.</p>
);
}
const matches = useMedia(mediaQueryString, options);
Accepts a media query string as the first argument (mediaQueryString
) and
returns whether it matches or not.
Optionally, you can pass a second argument to useMedia
that is an object with
the following properties:
initialMatches
(boolean): The value ofmatches
on first mount. Defaults totrue
.