react-use-match-media

Simple window.matchMedia React hook

Usage no npm install needed!

<script type="module">
  import reactUseMatchMedia from 'https://cdn.skypack.dev/react-use-match-media';
</script>

README

react-use-match-media

Simple window.matchMedia React hook.

Usage

useMatchMedia(mediaQueryString[, initialState])

Parameters

  • mediaQueryString string representing the media query to parse.
  • initialState (optional) boolean initial state to return if window.matchMedia is not supported, i.e. SSR.

Return value

Boolean that returns true if the document currently matches the media query list.

Example

import useMatchMedia from 'react-use-match-media';

const Example = (props) => {
  const isWideViewport = useMatchMedia('(min-width: 600px)');

  return <div>{isWideViewport ? 'Wide' : 'Narrow'}</div>;
};

More examples can be found in the COOKBOOK.md.

Requirements

Requires a minimum of React version 16.8.0 for the Hooks API.