extra-react-hooks 0.8.2 → 0.8.3

package/README.md

@@ -219,3 +219,8 @@ function useNumberInput(params: {
   >>
 }
 ```
+
+### useMediaQuery
+```ts
+function useMediaQuery(query: string): boolean
+```

package/lib/index.d.ts

@@ -23,3 +23,4 @@ export * from './use-get-set.js';
 export * from './use-isomorphic-layout-effect.js';
 export * from './use-debounce.js';
 export * from './use-number-input.js';
+export * from './use-media-query.js';

package/lib/index.js

@@ -23,4 +23,5 @@ export * from './use-get-set.js';
 export * from './use-isomorphic-layout-effect.js';
 export * from './use-debounce.js';
 export * from './use-number-input.js';
+export * from './use-media-query.js';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA"}

package/lib/use-media-query.d.ts

@@ -0,0 +1 @@
+export declare function useMediaQuery(query: string): boolean;

package/lib/use-media-query.js

@@ -0,0 +1,15 @@
+import { useState, useMemo, useEffect } from 'react';
+export function useMediaQuery(query) {
+    const mediaQuery = useMemo(() => matchMedia(query), [query]);
+    const [matches, setMatches] = useState(mediaQuery.matches);
+    useEffect(() => {
+        updateMatches();
+        mediaQuery.addEventListener('change', updateMatches);
+        return () => mediaQuery.removeEventListener('change', updateMatches);
+        function updateMatches() {
+            setMatches(mediaQuery.matches);
+        }
+    }, [mediaQuery]);
+    return matches;
+}
+//# sourceMappingURL=use-media-query.js.map

package/lib/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.js","sourceRoot":"","sources":["../src/use-media-query.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,MAAM,UAAU,aAAa,CAAC,KAAa;IACzC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAC5D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,UAAU,CAAC,OAAO,CAAC,CAAA;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;QAEf,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QACpD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QAEpE,SAAS,aAAa;YACpB,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "",
   "keywords": [],
   "files": [

package/src/index.ts

@@ -23,3 +23,4 @@ export * from './use-get-set.js'
 export * from './use-isomorphic-layout-effect.js'
 export * from './use-debounce.js'
 export * from './use-number-input.js'
+export * from './use-media-query.js'

package/src/use-media-query.ts

@@ -0,0 +1,19 @@
+import { useState, useMemo, useEffect } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const mediaQuery = useMemo(() => matchMedia(query), [query])
+  const [matches, setMatches] = useState<boolean>(mediaQuery.matches)
+
+  useEffect(() => {
+    updateMatches()
+
+    mediaQuery.addEventListener('change', updateMatches)
+    return () => mediaQuery.removeEventListener('change', updateMatches)
+
+    function updateMatches(): void {
+      setMatches(mediaQuery.matches)
+    }
+  }, [mediaQuery])
+
+  return matches
+}