diff --git a/package.json b/package.json index 8f51aad..8133e4c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "simple-parallax-js", - "version": "6.0.1", + "name": "@gaborottlik/simple-parallax-js", + "version": "6.0.2", "description": "simpleParallax.js is a lightweight and easy-to-use JS library that adds parallax animations to any image.", "homepage": "https://simpleparallax.com/", "main": "dist/react/simpleParallax.umd.js", diff --git a/src/react/index.tsx b/src/react/index.tsx index e4e362b..45b1aa5 100644 --- a/src/react/index.tsx +++ b/src/react/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import AnimationManager from "./AnimationManager"; import useGetImageHeight from "./hooks/useGetImageHeight"; import useGetTransitionValue from "./hooks/useGetTransitionValue"; @@ -49,9 +49,6 @@ const SimpleParallax: React.FunctionComponent = ({ if (boundingClientRect) { setBoundingClientRect(boundingClientRect); } - if (!isInit) { - setIsInit(true); - } setViewportTop(window.scrollY); } }, [viewportTop, isVisible, imageRef]); @@ -76,17 +73,19 @@ const SimpleParallax: React.FunctionComponent = ({ }; }, [updateParallax]); - const clonedChild = React.isValidElement(children) - ? React.cloneElement(children as React.ReactElement, { - style: { - ...((children as React.ReactElement).props.style ?? {}), - transform: transformCSS, - willChange: "transform", - transition: transitionCSS, - }, - ref: imageRef, - }) - : null; + const clonedChild = useMemo(() => { + return React.isValidElement(children) + ? React.cloneElement(children as React.ReactElement, { + style: { + ...((children as React.ReactElement).props.style ?? {}), + transform: transformCSS, + willChange: "transform", + transition: transitionCSS, + }, + ref: imageRef, + }) + : null; + }, [children, (children as React.ReactElement).props.style, transformCSS, transitionCSS]) return (
= 4.21.0": +browserslist@^4.22.2: version "4.23.0" resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz" integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ== @@ -872,16 +1057,16 @@ color-convert@^2.0.1: dependencies: color-name "~1.1.4" -color-name@~1.1.4: - version "1.1.4" - resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz" - integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== - color-name@1.1.3: version "1.1.3" resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz" integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== +color-name@~1.1.4: + version "1.1.4" + resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz" + integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== + commander@^9.4.1: version "9.5.0" resolved "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz" @@ -1206,7 +1391,7 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4 resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz" integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== -"eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", eslint@^8.56.0, eslint@^8.57.0: +eslint@^8.57.0: version "8.57.0" resolved "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz" integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ== @@ -1949,28 +2134,14 @@ minimatch@^3.0.5, minimatch@~3.0.3: dependencies: brace-expansion "^1.1.7" -minimatch@^3.1.1: - version "3.1.2" - resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz" - integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== - dependencies: - brace-expansion "^1.1.7" - -minimatch@^3.1.2: +minimatch@^3.1.1, minimatch@^3.1.2: version "3.1.2" resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz" integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== dependencies: brace-expansion "^1.1.7" -minimatch@^9.0.3: - version "9.0.4" - resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz" - integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw== - dependencies: - brace-expansion "^2.0.1" - -minimatch@^9.0.4: +minimatch@^9.0.3, minimatch@^9.0.4: version "9.0.4" resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz" integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw== @@ -2187,7 +2358,7 @@ queue-microtask@^1.2.2: resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== -react-dom@^18.3.1, react-dom@>=17.0.0: +react-dom@^18.3.1: version "18.3.1" resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz" integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw== @@ -2205,7 +2376,7 @@ react-refresh@^0.14.2: resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz" integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA== -react@^18.3.1, react@>=17.0.0: +react@^18.3.1: version "18.3.1" resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ== @@ -2278,7 +2449,7 @@ rimraf@^3.0.2: dependencies: glob "^7.1.3" -rollup@^1.20.0||^2.0.0||^3.0.0||^4.0.0, rollup@^4.13.0: +rollup@^4.13.0: version "4.18.0" resolved "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz" integrity sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg== @@ -2341,12 +2512,7 @@ semver@^6.3.1: resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz" integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== -semver@^7.5.4: - version "7.6.2" - resolved "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz" - integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w== - -semver@^7.6.0: +semver@^7.5.4, semver@^7.6.0: version "7.6.2" resolved "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz" integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w== @@ -2402,13 +2568,6 @@ side-channel@^1.0.4, side-channel@^1.0.6: get-intrinsic "^1.2.4" object-inspect "^1.13.1" -simple-parallax-js-beta@^6.0.3: - version "6.0.6" - resolved "https://registry.npmjs.org/simple-parallax-js-beta/-/simple-parallax-js-beta-6.0.6.tgz" - integrity sha512-wlsG8dMtfY0K7Q/PpndqxcUgXoEavvMEe+Jh/9SZ8j0ht9UB1Hw6YK6Iy+W7nCbdVGO+aXjWeBo+Z77cKaGR5w== - dependencies: - simple-parallax-js-beta "^6.0.3" - slash@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz" @@ -2605,16 +2764,16 @@ typescript-eslint@^7.12.0: "@typescript-eslint/parser" "7.12.0" "@typescript-eslint/utils" "7.12.0" -typescript@*, typescript@^4.6.4, typescript@>=4.2.0: - version "4.9.5" - resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz" - integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== - typescript@5.4.2: version "5.4.2" resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz" integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ== +typescript@^4.6.4: + version "4.9.5" + resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz" + integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== + unbox-primitive@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz" @@ -2663,7 +2822,7 @@ vite-plugin-dts@^3.9.1: magic-string "^0.30.8" vue-tsc "^1.8.27" -vite@*, "vite@^4.2.0 || ^5.0.0", vite@^5.2.12: +vite@^5.2.12: version "5.2.12" resolved "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz" integrity sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==