React `useMatchMedia` hook

README.md

useMatchMedia Hook

This hook takes a media query string and returns an array with a boolean (matches) and a way to set the media query (setMediaQuery)

Example: https://codepen.io/tbremer/pen/QWWEwXr?editors=1010

To use:

function Application() {
  const [matches] = useMatchMedia('(max-width: 600px)');

  return (
    <div style={{ color: matches ? 'blue' : 'red' }}>
      <h1>Welcome to React v{React.version}!</h1>
    </div>
  );
}

ReactDOM.render(
  <Application />,
  document.getElementById('app')
);

API

useMatchMedia(query: string): returns an array with two items

[
  matches: boolean,
  setMediaQuery: (string) => void // function that takes a query (string) as it's argument.
]

useMatchMedia.js

import React from 'react';

export default function useMatchMedia(query) {
  const [mediaQueryList, setMediaQuery] = React.useState(window.matchMedia(query));
  const [matches, setMatch] = React.useState(mediaQueryList.matches);

  React.useEffect(() => {
    mediaQueryList.addListener(evt => setMatch(evt.matches))
  }, []);
  
  return [matches, setMediaQuery];
}