useMediaQuery.ts

// Code from: https://usehooks-ts.com/react-hook/use-media-query
import { useEffect, useState } from "react";

const getMatches = (query: string): boolean => {
    // Prevents SSR issues
    if (typeof window !== "undefined") {
        return window.matchMedia(query).matches;
    }
    return false;
};

/** Can be used to retrieve window dimensions with this React Hook which also works onResize. (Source: https://usehooks-ts.com/react-hook/use-media-query) */
export function useMediaQuery(query: string): boolean {
    const [matches, setMatches] = useState<boolean>(getMatches(query));

    useEffect(() => {
        function handleChange() {
            setMatches(getMatches(query));
        }

        const matchMedia = window.matchMedia(query);

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

        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
        if (matchMedia.addListener) {
            matchMedia.addListener(handleChange);
        } else {
            matchMedia.addEventListener("change", handleChange);
        }

        return () => {
            if (matchMedia.removeListener) {
                matchMedia.removeListener(handleChange);
            } else {
                matchMedia.removeEventListener("change", handleChange);
            }
        };
    }, [query]);

    return matches;
}