@restart/hooks - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

cjs/useBreakpoint.d.ts

@@ -26,4 +26,4 @@ export declare type BreakpointDirection = 'up' | 'down' | true;
 export declare function createBreakpointHook<TKey extends string>(breakpointValues: Record<TKey, string | number>): {
-    (breakpointMap: BreakpointMap<TKey>): boolean;
-    (breakpoint: TKey, direction?: BreakpointDirection | undefined): boolean;
+    (breakpointMap: BreakpointMap<TKey>, window?: Window | undefined): boolean;
+    (breakpoint: TKey, direction?: BreakpointDirection | undefined, window?: Window | undefined): boolean;
 };
@@ -33,5 +33,5 @@ export declare type DefaultBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 declare const useBreakpoint: {
-    (breakpointMap: Partial<Record<DefaultBreakpoints, BreakpointDirection>>): boolean;
-    (breakpoint: DefaultBreakpoints, direction?: BreakpointDirection | undefined): boolean;
+    (breakpointMap: Partial<Record<DefaultBreakpoints, BreakpointDirection>>, window?: Window | undefined): boolean;
+    (breakpoint: DefaultBreakpoints, direction?: BreakpointDirection | undefined, window?: Window | undefined): boolean;
 };
 export default useBreakpoint;

cjs/useBreakpoint.js

@@ -79,10 +79,7 @@ "use strict";
    * breakpoints together
+   * @param window Optionally specify the target window to match against (useful when rendering into iframes)
    */
 
 
-  function useBreakpoint(breakpointOrMap, direction) {
-    if (direction === void 0) {
-      direction = true;
-    }
-
+  function useBreakpoint(breakpointOrMap, direction, window) {
     var breakpointMap;
@@ -92,5 +89,8 @@
       breakpointMap = breakpointOrMap;
+      window = direction;
+      direction = true;
     } else {
       var _breakpointMap;
 
+      direction = direction || true;
       breakpointMap = (_breakpointMap = {}, _breakpointMap[breakpointOrMap] = direction, _breakpointMap);
@@ -115,3 +115,3 @@ }
     }, [JSON.stringify(breakpointMap)]);
-    return (0, _useMediaQuery.default)(query);
+    return (0, _useMediaQuery.default)(query, window);
   }
@@ -118,0 +118,0 @@

cjs/useCommittedRef.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
  * value is the one rendered with. Generally only required for Concurrent mode usage
- * where previous work in `render()` may be discarded befor being used.
+ * where previous work in `render()` may be discarded before being used.
  *
@@ -8,0 +8,0 @@ * This is safe to access in an event handler.

cjs/useCommittedRef.js

@@ -11,3 +11,3 @@ "use strict";
  * value is the one rendered with. Generally only required for Concurrent mode usage
- * where previous work in `render()` may be discarded befor being used.
+ * where previous work in `render()` may be discarded before being used.
  *
@@ -14,0 +14,0 @@ * This is safe to access in an event handler.

cjs/useMediaQuery.d.ts

@@ -18,3 +18,4 @@ /**
  * @param query A media query
+ * @param targetWindow The window to match against, uses the globally available one as a default.
  */
-export default function useMediaQuery(query: string | null): boolean;
+export default function useMediaQuery(query: string | null, targetWindow?: Window): boolean;

cjs/useMediaQuery.js

@@ -18,8 +18,12 @@ "use strict";
 
-var getMatcher = function getMatcher(query) {
-  if (!query || typeof window == 'undefined') return undefined;
+var getMatcher = function getMatcher(query, targetWindow) {
+  if (targetWindow === void 0) {
+    targetWindow = typeof window === 'undefined' ? undefined : window;
+  }
+
+  if (!query || !targetWindow) return undefined;
   var mql = matchers.get(query);
 
   if (!mql) {
-    mql = window.matchMedia(query);
+    mql = targetWindow.matchMedia(query);
     mql.refCount = 0;
@@ -48,7 +52,8 @@ matchers.set(mql.media, mql);
  * @param query A media query
+ * @param targetWindow The window to match against, uses the globally available one as a default.
  */
 
 
-function useMediaQuery(query) {
-  var mql = getMatcher(query);
+function useMediaQuery(query, targetWindow) {
+  var mql = getMatcher(query, targetWindow);
 
@@ -62,3 +67,3 @@ var _useState = (0, _react.useState)(function () {
   (0, _useIsomorphicEffect.default)(function () {
-    var mql = getMatcher(query);
+    var mql = getMatcher(query, targetWindow);
 
@@ -65,0 +70,0 @@ if (!mql) {

esm/useBreakpoint.d.ts

@@ -26,4 +26,4 @@ export declare type BreakpointDirection = 'up' | 'down' | true;
 export declare function createBreakpointHook<TKey extends string>(breakpointValues: Record<TKey, string | number>): {
-    (breakpointMap: BreakpointMap<TKey>): boolean;
-    (breakpoint: TKey, direction?: BreakpointDirection | undefined): boolean;
+    (breakpointMap: BreakpointMap<TKey>, window?: Window | undefined): boolean;
+    (breakpoint: TKey, direction?: BreakpointDirection | undefined, window?: Window | undefined): boolean;
 };
@@ -33,5 +33,5 @@ export declare type DefaultBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 declare const useBreakpoint: {
-    (breakpointMap: Partial<Record<DefaultBreakpoints, BreakpointDirection>>): boolean;
-    (breakpoint: DefaultBreakpoints, direction?: BreakpointDirection | undefined): boolean;
+    (breakpointMap: Partial<Record<DefaultBreakpoints, BreakpointDirection>>, window?: Window | undefined): boolean;
+    (breakpoint: DefaultBreakpoints, direction?: BreakpointDirection | undefined, window?: Window | undefined): boolean;
 };
 export default useBreakpoint;

esm/useBreakpoint.js

@@ -70,10 +70,7 @@ import useMediaQuery from './useMediaQuery';
    * breakpoints together
+   * @param window Optionally specify the target window to match against (useful when rendering into iframes)
    */
 
 
-  function useBreakpoint(breakpointOrMap, direction) {
-    if (direction === void 0) {
-      direction = true;
-    }
-
+  function useBreakpoint(breakpointOrMap, direction, window) {
     var breakpointMap;
@@ -83,5 +80,8 @@
       breakpointMap = breakpointOrMap;
+      window = direction;
+      direction = true;
     } else {
       var _breakpointMap;
 
+      direction = direction || true;
       breakpointMap = (_breakpointMap = {}, _breakpointMap[breakpointOrMap] = direction, _breakpointMap);
@@ -106,3 +106,3 @@ }
     }, [JSON.stringify(breakpointMap)]);
-    return useMediaQuery(query);
+    return useMediaQuery(query, window);
   }
@@ -109,0 +109,0 @@

esm/useCommittedRef.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
  * value is the one rendered with. Generally only required for Concurrent mode usage
- * where previous work in `render()` may be discarded befor being used.
+ * where previous work in `render()` may be discarded before being used.
  *
@@ -8,0 +8,0 @@ * This is safe to access in an event handler.

esm/useCommittedRef.js

@@ -5,3 +5,3 @@ import { useEffect, useRef } from 'react';
  * value is the one rendered with. Generally only required for Concurrent mode usage
- * where previous work in `render()` may be discarded befor being used.
+ * where previous work in `render()` may be discarded before being used.
  *
@@ -8,0 +8,0 @@ * This is safe to access in an event handler.

esm/useMediaQuery.d.ts

@@ -18,3 +18,4 @@ /**
  * @param query A media query
+ * @param targetWindow The window to match against, uses the globally available one as a default.
  */
-export default function useMediaQuery(query: string | null): boolean;
+export default function useMediaQuery(query: string | null, targetWindow?: Window): boolean;

esm/useMediaQuery.js

@@ -10,8 +10,12 @@ import useEffect from './useIsomorphicEffect';
 
-var getMatcher = function getMatcher(query) {
-  if (!query || typeof window == 'undefined') return undefined;
+var getMatcher = function getMatcher(query, targetWindow) {
+  if (targetWindow === void 0) {
+    targetWindow = typeof window === 'undefined' ? undefined : window;
+  }
+
+  if (!query || !targetWindow) return undefined;
   var mql = matchers.get(query);
 
   if (!mql) {
-    mql = window.matchMedia(query);
+    mql = targetWindow.matchMedia(query);
     mql.refCount = 0;
@@ -40,7 +44,8 @@ matchers.set(mql.media, mql);
  * @param query A media query
+ * @param targetWindow The window to match against, uses the globally available one as a default.
  */
 
 
-export default function useMediaQuery(query) {
-  var mql = getMatcher(query);
+export default function useMediaQuery(query, targetWindow) {
+  var mql = getMatcher(query, targetWindow);
 
@@ -54,3 +59,3 @@ var _useState = useState(function () {
   useEffect(function () {
-    var mql = getMatcher(query);
+    var mql = getMatcher(query, targetWindow);
 
@@ -57,0 +62,0 @@ if (!mql) {

package.json

 {
   "name": "@restart/hooks",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "main": "cjs/index.js",
@@ -5,0 +5,0 @@ "types": "cjs/index.d.ts",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

184765

increased by0.7%

Lines of code

4961

increased by0.24%

No dependency changes