@intility/bifrost-react/dist/hooks/useMediaQuery.js

React library for Intility's design system, Bifrost.

"use client";
import { useState } from "react";
import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
const useMediaQuery = (query)=>{
    const [match, setMatch] = useState();
    useIsomorphicLayoutEffect(()=>{
        // need to check for matchMedia existence when unit testing
        if (typeof matchMedia === "undefined") return;
        // effects don't run on server
        const mediaQueryList = matchMedia(query);
        // does nothing if state already matches
        // still necessary in case mediaListQuery changes due to query changing
        setMatch(mediaQueryList.matches);
        const listener = (e)=>setMatch(e.matches);
        mediaQueryList.addEventListener("change", listener);
        return ()=>mediaQueryList.removeEventListener("change", listener);
    }, [
        query
    ]);
    return match;
};
export default useMediaQuery;