useMediaQueries

useMediaQueries.ts

import { useEffect, useState } from 'react';

type QueryValue = {
  query: string;
  value: string;
};

function useMediaQueries(queriesValues: QueryValue[]): QueryValue | null {
  const getMatches = (internalQueriesValues: QueryValue[]): QueryValue | null => {
    // Prevents SSR issues
    if (typeof window !== 'undefined') {
      const found = internalQueriesValues?.find((qv) => {
        return window.matchMedia(qv.query).matches;
      });
      return found || null;
    }
    return null;
  };

  const [match, setMatch] = useState<QueryValue | null>(getMatches(queriesValues));

  function handleChange() {
    setMatch(getMatches(queriesValues));
  }

  useEffect(() => {
    const matchMedias = queriesValues.map((qv) => window.matchMedia(qv.query));

    // Triggered at the first client-side load and if query changes
    handleChange();

    matchMedias.forEach((mm) => {
      // Listen matchMedia
      if (mm.addListener) {
        mm.addListener(handleChange);
      } else {
        mm.addEventListener('change', handleChange);
      }
    });

    return () => {
      matchMedias.forEach((mm) => {
        if (mm.removeListener) {
          mm.removeListener(handleChange);
        } else {
          mm.removeEventListener('change', handleChange);
        }
      });
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [queriesValues]);

  return match;
}

export default useMediaQueries;