| 1 | {"version":3,"sources":["useMediaQuery.js"],"names":["errorMessage","useMediaQuery","mediaQuery","isClient","console","warn","window","matchMedia","matches","isVerified","setIsVerified","mediaQueryList","documentChangeHandler","addListener","removeListener"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,sGACjB,6FADJ;;AAWA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,UAAD,EAAgB;AACpC,MAAI,CAACC,oBAAD,IAAa,CAAC,gCAAe,YAAf,CAAlB,EAAgD;AAE9CC,IAAAA,OAAO,CAACC,IAAR,CAAaL,YAAb;AACA,WAAO,IAAP;AACD;;AALmC,kBAOA,qBAAS,CAAC,CAACM,MAAM,CAACC,UAAP,CAAkBL,UAAlB,EAA8BM,OAAzC,CAPA;AAAA;AAAA,MAO7BC,UAP6B;AAAA,MAOjBC,aAPiB;;AASpC,wBAAU,YAAM;AACd,QAAMC,cAAc,GAAGL,MAAM,CAACC,UAAP,CAAkBL,UAAlB,CAAvB;;AACA,QAAMU,qBAAqB,GAAG,SAAxBA,qBAAwB;AAAA,aAAMF,aAAa,CAAC,CAAC,CAACC,cAAc,CAACH,OAAlB,CAAnB;AAAA,KAA9B;;AAEAG,IAAAA,cAAc,CAACE,WAAf,CAA2BD,qBAA3B;AAEAA,IAAAA,qBAAqB;AACrB,WAAO,YAAM;AACXD,MAAAA,cAAc,CAACG,cAAf,CAA8BF,qBAA9B;AACD,KAFD;AAGD,GAVD,EAUG,CAACV,UAAD,CAVH;AAYA,SAAOO,UAAP;AACD,CAtBD;;eAwBeR,a","sourcesContent":["import { useState, useEffect } from 'react';\nimport isClient from './utils/isClient';\nimport isAPISupported from './utils/isAPISupported';\n\nconst errorMessage = 'matchMedia is not supported, this could happen both because window.matchMedia is not supported by'\n + ' your current browser or you\\'re using the useMediaQuery hook whilst server side rendering.';\n\n/**\n * Accepts a media query string then uses the\n * [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) API to determine if it\n * matches with the current document.<br />\n * It also monitor the document changes to detect when it matches or stops matching the media query.<br />\n * Returns the validity state of the given media query.\n *\n */\nconst useMediaQuery = (mediaQuery) => {\n if (!isClient || !isAPISupported('matchMedia')) {\n // eslint-disable-next-line no-console\n console.warn(errorMessage);\n return null;\n }\n\n const [isVerified, setIsVerified] = useState(!!window.matchMedia(mediaQuery).matches);\n\n useEffect(() => {\n const mediaQueryList = window.matchMedia(mediaQuery);\n const documentChangeHandler = () => setIsVerified(!!mediaQueryList.matches);\n\n mediaQueryList.addListener(documentChangeHandler);\n\n documentChangeHandler();\n return () => {\n mediaQueryList.removeListener(documentChangeHandler);\n };\n }, [mediaQuery]);\n\n return isVerified;\n};\n\nexport default useMediaQuery;\n"],"file":"useMediaQuery.js"} |