@shopify/react-hooks - npm Package Compare versions

Comparing version 1.8.0 to 1.9.0

CHANGELOG.md

@@ -10,2 +10,8 @@ # Changelog
 
+## [1.9.0] - 2020-04-23
+
+### Added
+
+- Added `useMediaLayout` hook ([#1396](https://github.com/Shopify/quilt/pull/1396))
+
 ## [1.8.0] - 2020-04-14
@@ -12,0 +18,0 @@

dist/src/hooks/media.d.ts

@@ -1,2 +0,3 @@
-export declare function useMedia(query: string): boolean;
+export declare const useMedia: (query: string) => boolean;
+export declare const useMediaLayout: (query: string) => boolean;
 //# sourceMappingURL=media.d.ts.map

dist/src/hooks/media.js

@@ -5,18 +5,23 @@ "use strict";
 var react_1 = require("react");
-function useMedia(query) {
-    var _a = tslib_1.__read(react_1.useState(false), 2), match = _a[0], setMatch = _a[1];
-    react_1.useEffect(function () {
-        if (!window || !window.matchMedia) {
-            return;
-        }
-        var matchMedia = window.matchMedia(query);
-        var updateMatch = function (event) { return setMatch(event.matches); };
-        setMatch(matchMedia.matches);
-        matchMedia.addListener(updateMatch);
-        return function () {
-            matchMedia.removeListener(updateMatch);
-        };
-    }, [query]);
-    return match;
+function createUseMediaFactory(useEffectHook) {
+    return function (query) {
+        var _a = tslib_1.__read(react_1.useState(false), 2), match = _a[0], setMatch = _a[1];
+        useEffectHook(function () {
+            if (!window || !window.matchMedia) {
+                return;
+            }
+            var matchMedia = window.matchMedia(query);
+            var updateMatch = function (event) {
+                return setMatch(event.matches);
+            };
+            setMatch(matchMedia.matches);
+            matchMedia.addListener(updateMatch);
+            return function () {
+                matchMedia.removeListener(updateMatch);
+            };
+        }, [query]);
+        return match;
+    };
 }
-exports.useMedia = useMedia;
+exports.useMedia = createUseMediaFactory(react_1.useEffect);
+exports.useMediaLayout = createUseMediaFactory(react_1.useLayoutEffect);

package.json

 {
   "name": "@shopify/react-hooks",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "A collection of primitive React hooks.",

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

20542

increased by2.25%

Lines of code

227

increased by2.71%

No dependency changes