@thibault.sh/hooks/dist/useMediaQuery.mjs.map

A comprehensive collection of React hooks for browser storage, UI interactions, and more

{"version":3,"sources":["../src/hooks/useMediaQuery.ts"],"names":["useMediaQuery","query","matches","setMatches","useState","useEffect","mediaQuery","handler","event"],"mappings":"uCAOaA,IAAAA,CAAAA,CAAiBC,CAA2B,EAAA,CACvD,GAAM,CAACC,CAASC,CAAAA,CAAU,CAAIC,CAAAA,QAAAA,CAAS,CAAK,CAAA,CAAA,CAE5C,OAAAC,SAAAA,CAAU,IAAM,CACd,IAAMC,CAAAA,CAAa,MAAO,CAAA,UAAA,CAAWL,CAAK,CAAA,CAC1CE,CAAWG,CAAAA,CAAAA,CAAW,OAAO,CAAA,CAE7B,IAAMC,CAAAA,CAAWC,CAA+B,EAAA,CAC9CL,CAAWK,CAAAA,CAAAA,CAAM,OAAO,EAC1B,CAEA,CAAA,OAAAF,CAAW,CAAA,gBAAA,CAAiB,QAAUC,CAAAA,CAAO,CAEtC,CAAA,IAAM,CACXD,CAAAA,CAAW,mBAAoB,CAAA,QAAA,CAAUC,CAAO,EAClD,CACF,CAAA,CAAG,CAACN,CAAK,CAAC,CAAA,CAEHC,CACT","file":"useMediaQuery.mjs","sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Hook that tracks state of a CSS media query\n * @param query - CSS media query string\n * @returns boolean indicating if the media query matches\n */\nexport const useMediaQuery = (query: string): boolean => {\n  const [matches, setMatches] = useState(false);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(query);\n    setMatches(mediaQuery.matches);\n\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    mediaQuery.addEventListener(\"change\", handler);\n\n    return () => {\n      mediaQuery.removeEventListener(\"change\", handler);\n    };\n  }, [query]);\n\n  return matches;\n};\n"]}