react-photo-album - npm Package Compare versions

Comparing version 1.12.0 to 1.13.0

dist/index.cjs.js

@@ -594,8 +594,15 @@ 'use strict';
 
+const useLatest = (value) => {
+    const ref = react.useRef(value);
+    ref.current = value;
+    return ref;
+};
+
 const useContainerWidth = (resizeObserverProvider, breakpoints) => {
     const observerRef = react.useRef();
     const breakpointsArray = useArray(breakpoints);
+    const resizeObserverProviderLatest = useLatest(resizeObserverProvider);
     const [containerWidth, setContainerWidth] = react.useState();
     const containerRef = react.useCallback((node) => {
-        var _a;
+        var _a, _b;
         if (observerRef.current) {
@@ -620,6 +627,6 @@ observerRef.current.disconnect();
                     ? new ResizeObserver(updateWidth)
-                    : resizeObserverProvider === null || resizeObserverProvider === void 0 ? void 0 : resizeObserverProvider(updateWidth);
-            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.observe(node);
+                    : (_a = resizeObserverProviderLatest.current) === null || _a === void 0 ? void 0 : _a.call(resizeObserverProviderLatest, updateWidth);
+            (_b = observerRef.current) === null || _b === void 0 ? void 0 : _b.observe(node);
         }
-    }, [resizeObserverProvider, breakpointsArray]);
+    }, [breakpointsArray, resizeObserverProviderLatest]);
     return react.useMemo(() => ({ containerRef, containerWidth }), [containerRef, containerWidth]);
@@ -626,0 +633,0 @@ };

dist/index.esm.js

@@ -590,8 +590,15 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 
+const useLatest = (value) => {
+    const ref = useRef(value);
+    ref.current = value;
+    return ref;
+};
+
 const useContainerWidth = (resizeObserverProvider, breakpoints) => {
     const observerRef = useRef();
     const breakpointsArray = useArray(breakpoints);
+    const resizeObserverProviderLatest = useLatest(resizeObserverProvider);
     const [containerWidth, setContainerWidth] = useState();
     const containerRef = useCallback((node) => {
-        var _a;
+        var _a, _b;
         if (observerRef.current) {
@@ -616,6 +623,6 @@ observerRef.current.disconnect();
                     ? new ResizeObserver(updateWidth)
-                    : resizeObserverProvider === null || resizeObserverProvider === void 0 ? void 0 : resizeObserverProvider(updateWidth);
-            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.observe(node);
+                    : (_a = resizeObserverProviderLatest.current) === null || _a === void 0 ? void 0 : _a.call(resizeObserverProviderLatest, updateWidth);
+            (_b = observerRef.current) === null || _b === void 0 ? void 0 : _b.observe(node);
         }
-    }, [resizeObserverProvider, breakpointsArray]);
+    }, [breakpointsArray, resizeObserverProviderLatest]);
     return useMemo(() => ({ containerRef, containerWidth }), [containerRef, containerWidth]);
@@ -622,0 +629,0 @@ };

package.json

 {
     "name": "react-photo-album",
-    "version": "1.12.0",
+    "version": "1.13.0",
     "description": "Responsive photo gallery component for React",
@@ -43,13 +43,13 @@ "author": "Igor Danchenko",
         "@commitlint/config-conventional": "^16.2.1",
-        "@rollup/plugin-node-resolve": "^13.1.3",
+        "@rollup/plugin-node-resolve": "^13.2.1",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/github": "^8.0.4",
-        "@testing-library/react": "^13.0.0",
+        "@testing-library/react": "^13.1.1",
         "@types/jest": "^27.4.1",
-        "@types/react": "^17.0.43",
-        "@types/react-dom": "^17.0.14",
-        "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.17.0",
-        "@typescript-eslint/parser": "^5.17.0",
-        "eslint": "^8.12.0",
+        "@types/react": "^18.0.7",
+        "@types/react-dom": "^18.0.0",
+        "@types/react-test-renderer": "^18.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.21.0",
+        "@typescript-eslint/parser": "^5.21.0",
+        "eslint": "^8.14.0",
         "eslint-config-prettier": "^8.5.0",
@@ -62,4 +62,4 @@ "eslint-plugin-jsx-a11y": "^6.5.1",
         "jest": "^27.5.1",
-        "lint-staged": "^12.3.7",
-        "prettier": "^2.6.1",
+        "lint-staged": "^12.4.0",
+        "prettier": "^2.6.2",
         "react": "^18.0.0",
@@ -69,4 +69,4 @@ "react-dom": "^18.0.0",
         "rimraf": "^3.0.2",
-        "rollup": "^2.70.1",
-        "rollup-plugin-dts": "^4.2.0",
+        "rollup": "^2.70.2",
+        "rollup-plugin-dts": "^4.2.1",
         "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -73,0 +73,0 @@ "rollup-plugin-typescript2": "^0.31.2",

README.md

@@ -13,3 +13,3 @@ # React Photo Album
 
-- **Built for React:** works with React 18, 17 and 16.14.0+
+- **Built for React:** works with React 18, 17 and 16.14.0
 - **SSR friendly:** produces server-side rendered markup that looks pixel perfect on the client even before hydration.
@@ -120,11 +120,2 @@ - **Responsive images:** responsive images with automatic resolution switching are supported out of the box.
 
-### ResizeObserver
-
-React Photo Album relies on [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to respond
-to container size changes (i.e., when the browser window gets resized, device orientation changes or page layout causes
-a shift in container dimensions). React Photo Album no longer bundles ResizeObserver polyfill as part of the library
-since, as of January 2022, over 91% of browsers support it natively. If your use case requires you to support some older
-browsers, you can accomplish this by either installing a global ResizeObserver polyfill or by supplying a ponyfill via
-the `resizeObserverProvider` parameter.
-
 ## Credits
@@ -131,0 +122,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Lines of code

1450

increased by0.83%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

80287

decreased by-0.28%

Number of lines in readme file

124

decreased by-6.77%

No dependency changes