React Hook Media Query

useMediaQuery.js

// const small = useMediaQuery('900px');
// return ( <h3>{small ? 'Small' : 'Large'}</h3> );

const useMediaQuery = (size, bound = 'max') => {
  const query = `(${bound}-width: ${size})`;
  const [matches, setMatches] = useState(window.matchMedia(query).matches);
  
  useEffect(() => {
    const mediaQuery = window.matchMedia(query);

    const updateMatches = (newValue) => {
      if (newValue.matches !== matches) {
        setMatches(newValue.matches);
      }
    }

    const listener = () => updateMatches(mediaQuery);

    updateMatches(mediaQuery);
    
    mediaQuery.addListener(listener);

    return () => {
      mediaQuery.removeListener(listener);
    };
  }, [matches, query]);

  return matches;
}