@restart/hooks - npm Package Compare versions

Comparing version 0.3.11 to 0.3.12

cjs/useBreakpoint.d.ts

@@ -1,6 +0,3 @@
-export interface AliasedScale<T> {
-    [idx: number]: T;
-    [alias: string]: T;
-}
-declare type BreakpointDirection = 'up' | 'down' | true;
+export declare type BreakpointDirection = 'up' | 'down' | true;
+export declare type BreakpointMap<TKey extends string> = Partial<Record<TKey, BreakpointDirection>>;
 /**
@@ -32,3 +29,4 @@ * Create a responsive hook we a set of breakpoint names and widths.
 };
-declare type DefaultBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type DefaultBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type DefaultBreakpointMap = BreakpointMap<DefaultBreakpoints>;
 declare const useBreakpoint: {
@@ -35,0 +33,0 @@ (breakpointMap: Partial<Record<DefaultBreakpoints, BreakpointDirection>>): boolean;

cjs/useBreakpoint.js

@@ -39,3 +39,6 @@ "use strict";
   function and(query, next) {
-    if (query === next || typeof next === 'boolean') return next;
+    if (query === next) {
+      return next;
+    }
+
     return query ? query + " and " + next : next;
@@ -51,3 +54,3 @@ }
     var value = breakpointValues[next];
-    if (typeof value === 'number') value = value - 0.2 + "px";else value = "calc$(" + value + " - 0.2px)";
+    if (typeof value === 'number') value = value - 0.2 + "px";else value = "calc(" + value + " - 0.2px)";
     return "(max-width: " + value + ")";
@@ -54,0 +57,0 @@ }

cjs/useMediaQuery.d.ts

@@ -19,2 +19,2 @@ /**
  */
-export default function useMediaQuery(query: string): boolean;
+export default function useMediaQuery(query: string | null): boolean;

cjs/useMediaQuery.js

@@ -6,9 +6,26 @@ "use strict";
 
+var _useIsomorphicEffect = _interopRequireDefault(require("./useIsomorphicEffect"));
+
 var _react = require("react");
 
-var _useIsomorphicEffect = _interopRequireDefault(require("./useIsomorphicEffect"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var isBool = function isBool(a) {
+  return typeof a === 'boolean';
+};
+
 var matchers = new Map();
+
+var getMatcher = function getMatcher(query) {
+  if (!query || typeof window == 'undefined') return undefined;
+  var mql = matchers.get(query);
+
+  if (!mql) {
+    mql = window.matchMedia(query);
+    mql.refCount = 0;
+    matchers.set(mql.media, mql);
+  }
+
+  return mql;
+};
 /**
@@ -33,4 +50,9 @@ * Match a media query and get updates as the match changes. The media string is
 
+
 function useMediaQuery(query) {
-  var _useState = (0, _react.useState)(false),
+  var mql = getMatcher(query);
+
+  var _useState = (0, _react.useState)(function () {
+    return mql ? mql.matches : false;
+  }),
       matches = _useState[0],
@@ -40,12 +62,6 @@ setMatches = _useState[1];
   (0, _useIsomorphicEffect.default)(function () {
-    if (typeof query === 'boolean') {
-      return setMatches(query);
-    }
+    var mql = getMatcher(query);
 
-    var mql = matchers.get(query);
-
     if (!mql) {
-      mql = window.matchMedia(query);
-      mql.refCount = 0;
-      matchers.set(mql.media, mql);
+      return setMatches(false);
     }
@@ -61,3 +77,2 @@
     return function () {
-      if (!mql) return;
       mql.removeListener(handleChange);
@@ -64,0 +79,0 @@ mql.refCount--;

esm/useBreakpoint.d.ts

@@ -1,6 +0,3 @@
-export interface AliasedScale<T> {
-    [idx: number]: T;
-    [alias: string]: T;
-}
-declare type BreakpointDirection = 'up' | 'down' | true;
+export declare type BreakpointDirection = 'up' | 'down' | true;
+export declare type BreakpointMap<TKey extends string> = Partial<Record<TKey, BreakpointDirection>>;
 /**
@@ -32,3 +29,4 @@ * Create a responsive hook we a set of breakpoint names and widths.
 };
-declare type DefaultBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type DefaultBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type DefaultBreakpointMap = BreakpointMap<DefaultBreakpoints>;
 declare const useBreakpoint: {
@@ -35,0 +33,0 @@ (breakpointMap: Partial<Record<DefaultBreakpoints, BreakpointDirection>>): boolean;

esm/useBreakpoint.js

@@ -30,3 +30,6 @@ import useMediaQuery from './useMediaQuery';
   function and(query, next) {
-    if (query === next || typeof next === 'boolean') return next;
+    if (query === next) {
+      return next;
+    }
+
     return query ? query + " and " + next : next;
@@ -42,3 +45,3 @@ }
     var value = breakpointValues[next];
-    if (typeof value === 'number') value = value - 0.2 + "px";else value = "calc$(" + value + " - 0.2px)";
+    if (typeof value === 'number') value = value - 0.2 + "px";else value = "calc(" + value + " - 0.2px)";
     return "(max-width: " + value + ")";
@@ -45,0 +48,0 @@ }

esm/useMediaQuery.d.ts

@@ -19,2 +19,2 @@ /**
  */
-export default function useMediaQuery(query: string): boolean;
+export default function useMediaQuery(query: string | null): boolean;

esm/useMediaQuery.js

@@ -0,4 +1,22 @@
+import useEffect from './useIsomorphicEffect';
 import { useState } from 'react';
-import useEffect from './useIsomorphicEffect';
+
+var isBool = function isBool(a) {
+  return typeof a === 'boolean';
+};
+
 var matchers = new Map();
+
+var getMatcher = function getMatcher(query) {
+  if (!query || typeof window == 'undefined') return undefined;
+  var mql = matchers.get(query);
+
+  if (!mql) {
+    mql = window.matchMedia(query);
+    mql.refCount = 0;
+    matchers.set(mql.media, mql);
+  }
+
+  return mql;
+};
 /**
@@ -23,4 +41,9 @@ * Match a media query and get updates as the match changes. The media string is
 
+
 export default function useMediaQuery(query) {
-  var _useState = useState(false),
+  var mql = getMatcher(query);
+
+  var _useState = useState(function () {
+    return mql ? mql.matches : false;
+  }),
       matches = _useState[0],
@@ -30,12 +53,6 @@ setMatches = _useState[1];
   useEffect(function () {
-    if (typeof query === 'boolean') {
-      return setMatches(query);
-    }
+    var mql = getMatcher(query);
 
-    var mql = matchers.get(query);
-
     if (!mql) {
-      mql = window.matchMedia(query);
-      mql.refCount = 0;
-      matchers.set(mql.media, mql);
+      return setMatches(false);
     }
@@ -51,3 +68,2 @@
     return function () {
-      if (!mql) return;
       mql.removeListener(handleChange);
@@ -54,0 +70,0 @@ mql.refCount--;

package.json

 {
   "name": "@restart/hooks",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "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

120150

increased by0.6%

Lines of code

3198

increased by0.63%

No dependency changes