@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":"uCA+BaA,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 the state of a CSS media query and updates when it changes.\n *\n * Provides a reactive way to respond to viewport changes, screen sizes, or any\n * CSS media query conditions in your React components.\n *\n * @param query - The CSS media query string to track (e.g., \"(min-width: 768px)\")\n *\n * @returns Boolean indicating whether the media query currently matches\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const isMobile = useMediaQuery('(max-width: 768px)');\n *   const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');\n *   const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');\n *\n *   return (\n *     <div>\n *       {isMobile && <MobileLayout />}\n *       {isTablet && <TabletLayout />}\n *       {isDarkMode ? <DarkTheme /> : <LightTheme />}\n *     </div>\n *   );\n * }\n * ```\n *\n * @see https://thibault.sh/hooks/use-media-query\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"]}