React/TypeScript Media Query Hook

useMediaQuery.ts

import { useCallback, useEffect } from 'react';

export type MediaQuery = MediaQueryListEvent['media'];
export type MediaQueryCallback = (event: MediaQueryListEvent) => void;

export function useMediaQuery(mediaQuery: MediaQuery, callback: MediaQueryCallback) {
  const handleMediaQuery = useCallback((event: MediaQueryListEvent) => {
    if (event.media === mediaQuery) {
      callback(event);
    }
  }, [mediaQuery, callback] );
  
  useEffect(() => {
    if (window?.matchMedia) {
      const mediaQueryList = window.matchMedia(mediaQuery);
      mediaQueryList.addEventListener('change', handleMediaQuery);
      
      return () => {
        mediaQueryList.removeEventListener('change', handleMediaQuery);
      };
    }
  }, []);
}

/**
  ### Usage
  
  function handlePrintMediaQuery(mediaQueryListEvent: MediaQueryListEvent) {
    // Do something
  }

  useMediaQuery('print', handlePrintMediaQuery)
*/