Simple window.matchMedia React hook.

useMatchMedia(mediaQueryString[, initialState])

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

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

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.

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