import { useEffect, useState } from 'react';

const useMediaQuery = (mediaQuery: string) => {
  const mediaQueryList = window.matchMedia(mediaQuery);
  const [value, setValue] = useState(false);

  useEffect(() => {
    const mediaQueryListener = () => setValue(mediaQueryList.matches);

    mediaQueryList.addListener(() => mediaQueryListener);

    return () => mediaQueryList.removeListener(mediaQueryListener);
  }, [mediaQueryList]);

  return value;
};

export default useMediaQuery;