react-scroll-parallax - npm Package Compare versions

Comparing version 3.0.0-beta.13 to 3.0.0-beta.14

dist/react-scroll-parallax.cjs.development.js

@@ -60,2 +60,9 @@ 'use strict';
 
+function removeUndefinedObjectKeys(obj) {
+  Object.keys(obj).forEach(function (key) {
+    return obj[key] === undefined ? delete obj[key] : {};
+  });
+  return obj;
+}
+
 var _excluded = ["disabled", "easing", "endScroll", "onChange", "onEnter", "onExit", "onProgressChange", "opacity", "rootMargin", "rotate", "rotateX", "rotateY", "rotateZ", "scale", "scaleX", "scaleY", "scaleZ", "shouldAlwaysCompleteAnimation", "shouldDisableScalingTranslations", "speed", "startScroll", "targetElement", "translateX", "translateY"];
@@ -89,3 +96,3 @@ function getIsolatedParallaxProps(props) {
 
-  var parallaxProps = {
+  var parallaxProps = removeUndefinedObjectKeys({
     disabled: disabled,
@@ -115,3 +122,3 @@ easing: easing,
     translateY: translateY
-  };
+  });
   return {
@@ -135,16 +142,2 @@ parallaxProps: parallaxProps,
 
-function removeUndefinedObjectKeys(obj) {
-  Object.keys(obj).forEach(function (key) {
-    return obj[key] === undefined ? delete obj[key] : {};
-  });
-  return obj;
-}
-
-function getParallaxProps(props) {
-  var _getIsolatedParallaxP = getIsolatedParallaxProps(props),
-      parallaxProps = _getIsolatedParallaxP.parallaxProps;
-
-  return removeUndefinedObjectKeys(_extends({}, parallaxProps));
-}
-
 var ParallaxContext = /*#__PURE__*/React__default.createContext(null);
@@ -170,2 +163,6 @@
   var ref = React.useRef(null);
+
+  var _getIsolatedParallaxP = getIsolatedParallaxProps(props),
+      parallaxProps = _getIsolatedParallaxP.parallaxProps;
+
   useVerifyController(controller);
@@ -184,3 +181,3 @@
         el: ref.current,
-        props: getParallaxProps(props)
+        props: parallaxProps
       };
@@ -205,4 +202,3 @@ newElement = controller == null ? void 0 : controller.createElement(options);
       } else {
-        var newProps = getParallaxProps(props);
-        controller == null ? void 0 : controller.updateElementPropsById(element.id, newProps);
+        controller == null ? void 0 : controller.updateElementPropsById(element.id, parallaxProps);
       }
@@ -209,0 +205,0 @@ }

dist/react-scroll-parallax.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("parallax-controller"),r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e;function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function o(e,t){return(o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(a[r]=e[r]);return a}var s=["disabled","easing","endScroll","onChange","onEnter","onExit","onProgressChange","opacity","rootMargin","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","shouldAlwaysCompleteAnimation","shouldDisableScalingTranslations","speed","startScroll","targetElement","translateX","translateY"];function i(e){return{parallaxProps:{disabled:e.disabled,easing:e.easing,endScroll:e.endScroll,onChange:e.onChange,onEnter:e.onEnter,onExit:e.onExit,onProgressChange:e.onProgressChange,opacity:e.opacity,rootMargin:e.rootMargin,rotate:e.rotate,rotateX:e.rotateX,rotateY:e.rotateY,rotateZ:e.rotateZ,scale:e.scale,scaleX:e.scaleX,scaleY:e.scaleY,scaleZ:e.scaleZ,shouldAlwaysCompleteAnimation:e.shouldAlwaysCompleteAnimation,shouldDisableScalingTranslations:e.shouldDisableScalingTranslations,speed:e.speed,startScroll:e.startScroll,targetElement:e.targetElement,translateX:e.translateX,translateY:e.translateY},rest:l(e,s)}}function c(e){var t,r=i(e);return t=a({},r.parallaxProps),Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t}var u=n.createContext(null);function d(){var e=r.useContext(u);if("undefined"==typeof window)return null;if(!e)throw new Error("Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>");return e}function p(e){var n=d(),a=r.useRef(null);!function(e){r.useEffect((function(){if(!("undefined"==typeof window||e||e instanceof t.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(n);var o=r.useState(),l=o[0],s=o[1];return r.useEffect((function(){var t;if(!(a.current instanceof HTMLElement))throw new Error("You must assign the ref returned by the useParallax() hook to an HTML Element.");var r={el:a.current,props:c(e)};return t=null==n?void 0:n.createElement(r),s(t),function(){t&&(null==n||n.removeElementById(t.id))}}),[]),r.useEffect((function(){if(l)if(e.disabled)null==n||n.resetElementStyles(l);else{var t=c(e);null==n||n.updateElementPropsById(l.id,t)}}),[e.disabled,e.easing,e.endScroll,e.onChange,e.onEnter,e.onExit,e.onProgressChange,e.opacity,e.rootMargin,e.rotate,e.rotateX,e.rotateY,e.rotateZ,e.scale,e.scaleX,e.scaleY,e.scaleZ,e.shouldAlwaysCompleteAnimation,e.shouldDisableScalingTranslations,e.speed,e.startScroll,e.targetElement,e.translateX,e.translateY]),{ref:a,controller:n,element:l}}var f=["disabled","style","layers"],h=["children","disabled","style","expanded","image"],g={position:"relative",overflow:"hidden",width:"100%"},x={position:"absolute",top:0,left:0,right:0,bottom:0},v=function(e){var r,a;function l(r){var n;return(n=e.call(this,r)||this).controller="undefined"==typeof window?null:t.ParallaxController.init({scrollAxis:r.scrollAxis,scrollContainer:r.scrollContainer}),n}a=e,(r=l).prototype=Object.create(a.prototype),r.prototype.constructor=r,o(r,a);var s=l.prototype;return s.componentDidUpdate=function(e){e.scrollContainer!==this.props.scrollContainer&&this.controller.updateScrollContainer(this.props.scrollContainer)},s.componentWillUnmount=function(){this.controller=this.controller.destroy()},s.render=function(){return n.createElement(u.Provider,{value:this.controller},this.props.children)},l}(r.Component);v.defaultProps={scrollAxis:t.ScrollAxis.vertical},Object.defineProperty(exports,"EasingPreset",{enumerable:!0,get:function(){return t.EasingPreset}}),exports.Parallax=function(e){var t=i(e),r=t.rest,a=p(t.parallaxProps);return n.createElement("div",Object.assign({ref:a.ref},r),e.children)},exports.ParallaxBanner=function(e){var t=e.style,r=e.layers,o=void 0===r?[]:r,s=l(e,f);return n.createElement("div",Object.assign({style:a({},g,t)},s),o.map((function(e,t){var r=i(e),o=r.parallaxProps,s=r.rest,c=s.style,u=s.expanded,d=void 0===u||u,f=l(s,h),g="layer-"+t,v=function(e){return e.image?{backgroundImage:"url("+e.image+")",backgroundPosition:"center",backgroundSize:"cover"}:{}}(e),y=function(e,t){var r=t.speed||0;return e?{top:10*Math.abs(r)*-1+"px",bottom:10*Math.abs(r)*-1+"px"}:{}}(d,e),m=p(a({shouldDisableScalingTranslations:!0},o));return n.createElement("div",Object.assign({"data-testid":g,key:g,ref:m.ref,style:a({},v,x,y,c)},f),s.children)})),e.children)},exports.ParallaxContext=u,exports.ParallaxProvider=v,exports.useParallax=p,exports.useParallaxController=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("parallax-controller"),r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e;function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function o(e,t){return(o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(a[r]=e[r]);return a}var s=["disabled","easing","endScroll","onChange","onEnter","onExit","onProgressChange","opacity","rootMargin","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","shouldAlwaysCompleteAnimation","shouldDisableScalingTranslations","speed","startScroll","targetElement","translateX","translateY"];function i(e){var t,r=e.disabled,n=e.easing,a=e.endScroll,o=e.onChange,i=e.onEnter,c=e.onExit,u=e.onProgressChange,d=e.opacity,p=e.rootMargin,f=e.rotate,h=e.rotateX,g=e.rotateY,x=e.rotateZ,y=e.scale,m=e.scaleX,v=e.scaleY,b=e.scaleZ,P=e.shouldAlwaysCompleteAnimation,E=e.shouldDisableScalingTranslations,C=e.speed,w=e.startScroll,S=e.targetElement,O=e.translateX,Y=e.translateY,j=l(e,s);return{parallaxProps:(t={disabled:r,easing:n,endScroll:a,onChange:o,onEnter:i,onExit:c,onProgressChange:u,opacity:d,rootMargin:p,rotate:f,rotateX:h,rotateY:g,rotateZ:x,scale:y,scaleX:m,scaleY:v,scaleZ:b,shouldAlwaysCompleteAnimation:P,shouldDisableScalingTranslations:E,speed:C,startScroll:w,targetElement:S,translateX:O,translateY:Y},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t),rest:j}}var c=n.createContext(null);function u(){var e=r.useContext(c);if("undefined"==typeof window)return null;if(!e)throw new Error("Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>");return e}function d(e){var n=u(),a=r.useRef(null),o=i(e).parallaxProps;!function(e){r.useEffect((function(){if(!("undefined"==typeof window||e||e instanceof t.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(n);var l=r.useState(),s=l[0],c=l[1];return r.useEffect((function(){var e;if(!(a.current instanceof HTMLElement))throw new Error("You must assign the ref returned by the useParallax() hook to an HTML Element.");return e=null==n?void 0:n.createElement({el:a.current,props:o}),c(e),function(){e&&(null==n||n.removeElementById(e.id))}}),[]),r.useEffect((function(){s&&(e.disabled?null==n||n.resetElementStyles(s):null==n||n.updateElementPropsById(s.id,o))}),[e.disabled,e.easing,e.endScroll,e.onChange,e.onEnter,e.onExit,e.onProgressChange,e.opacity,e.rootMargin,e.rotate,e.rotateX,e.rotateY,e.rotateZ,e.scale,e.scaleX,e.scaleY,e.scaleZ,e.shouldAlwaysCompleteAnimation,e.shouldDisableScalingTranslations,e.speed,e.startScroll,e.targetElement,e.translateX,e.translateY]),{ref:a,controller:n,element:s}}var p=["disabled","style","layers"],f=["children","disabled","style","expanded","image"],h={position:"relative",overflow:"hidden",width:"100%"},g={position:"absolute",top:0,left:0,right:0,bottom:0},x=function(e){var r,a;function l(r){var n;return(n=e.call(this,r)||this).controller="undefined"==typeof window?null:t.ParallaxController.init({scrollAxis:r.scrollAxis,scrollContainer:r.scrollContainer}),n}a=e,(r=l).prototype=Object.create(a.prototype),r.prototype.constructor=r,o(r,a);var s=l.prototype;return s.componentDidUpdate=function(e){e.scrollContainer!==this.props.scrollContainer&&this.controller.updateScrollContainer(this.props.scrollContainer)},s.componentWillUnmount=function(){this.controller=this.controller.destroy()},s.render=function(){return n.createElement(c.Provider,{value:this.controller},this.props.children)},l}(r.Component);x.defaultProps={scrollAxis:t.ScrollAxis.vertical},Object.defineProperty(exports,"EasingPreset",{enumerable:!0,get:function(){return t.EasingPreset}}),exports.Parallax=function(e){var t=i(e),r=t.rest,a=d(t.parallaxProps);return n.createElement("div",Object.assign({ref:a.ref},r),e.children)},exports.ParallaxBanner=function(e){var t=e.style,r=e.layers,o=void 0===r?[]:r,s=l(e,p);return n.createElement("div",Object.assign({style:a({},h,t)},s),o.map((function(e,t){var r=i(e),o=r.parallaxProps,s=r.rest,c=s.style,u=s.expanded,p=void 0===u||u,h=l(s,f),x="layer-"+t,y=function(e){return e.image?{backgroundImage:"url("+e.image+")",backgroundPosition:"center",backgroundSize:"cover"}:{}}(e),m=function(e,t){var r=t.speed||0;return e?{top:10*Math.abs(r)*-1+"px",bottom:10*Math.abs(r)*-1+"px"}:{}}(p,e),v=d(a({shouldDisableScalingTranslations:!0},o));return n.createElement("div",Object.assign({"data-testid":x,key:x,ref:v.ref,style:a({},y,g,m,c)},h),s.children)})),e.children)},exports.ParallaxContext=c,exports.ParallaxProvider=x,exports.useParallax=d,exports.useParallaxController=u;
 //# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map

dist/react-scroll-parallax.esm.js

@@ -54,2 +54,9 @@ import { ParallaxController, ScrollAxis } from 'parallax-controller';
 
+function removeUndefinedObjectKeys(obj) {
+  Object.keys(obj).forEach(function (key) {
+    return obj[key] === undefined ? delete obj[key] : {};
+  });
+  return obj;
+}
+
 var _excluded = ["disabled", "easing", "endScroll", "onChange", "onEnter", "onExit", "onProgressChange", "opacity", "rootMargin", "rotate", "rotateX", "rotateY", "rotateZ", "scale", "scaleX", "scaleY", "scaleZ", "shouldAlwaysCompleteAnimation", "shouldDisableScalingTranslations", "speed", "startScroll", "targetElement", "translateX", "translateY"];
@@ -83,3 +90,3 @@ function getIsolatedParallaxProps(props) {
 
-  var parallaxProps = {
+  var parallaxProps = removeUndefinedObjectKeys({
     disabled: disabled,
@@ -109,3 +116,3 @@ easing: easing,
     translateY: translateY
-  };
+  });
   return {
@@ -129,16 +136,2 @@ parallaxProps: parallaxProps,
 
-function removeUndefinedObjectKeys(obj) {
-  Object.keys(obj).forEach(function (key) {
-    return obj[key] === undefined ? delete obj[key] : {};
-  });
-  return obj;
-}
-
-function getParallaxProps(props) {
-  var _getIsolatedParallaxP = getIsolatedParallaxProps(props),
-      parallaxProps = _getIsolatedParallaxP.parallaxProps;
-
-  return removeUndefinedObjectKeys(_extends({}, parallaxProps));
-}
-
 var ParallaxContext = /*#__PURE__*/React.createContext(null);
@@ -164,2 +157,6 @@
   var ref = useRef(null);
+
+  var _getIsolatedParallaxP = getIsolatedParallaxProps(props),
+      parallaxProps = _getIsolatedParallaxP.parallaxProps;
+
   useVerifyController(controller);
@@ -178,3 +175,3 @@
         el: ref.current,
-        props: getParallaxProps(props)
+        props: parallaxProps
       };
@@ -199,4 +196,3 @@ newElement = controller == null ? void 0 : controller.createElement(options);
       } else {
-        var newProps = getParallaxProps(props);
-        controller == null ? void 0 : controller.updateElementPropsById(element.id, newProps);
+        controller == null ? void 0 : controller.updateElementPropsById(element.id, parallaxProps);
       }
@@ -203,0 +199,0 @@ }

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "3.0.0-beta.13",
-  "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
+  "version": "3.0.0-beta.14",
+  "description": "React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.",
   "keywords": [
@@ -12,2 +12,3 @@ "react",
     "animation",
+    "hooks",
     "component"
@@ -14,0 +15,0 @@ ],

src/helpers/getIsolatedParallaxProps.ts

 import { ParallaxElementConfig } from 'parallax-controller';
+import { removeUndefinedObjectKeys } from '../utils/removeUndefinedObjectKeys';
 
@@ -35,3 +36,3 @@ export function getIsolatedParallaxProps(props: any): {
 
-  const parallaxProps = {
+  const parallaxProps = removeUndefinedObjectKeys({
     disabled,
@@ -61,3 +62,3 @@ easing,
     translateY,
-  };
+  });
 
@@ -64,0 +65,0 @@ return {

src/hooks/useParallax.ts

@@ -5,3 +5,3 @@ import { CreateElementOptions, Element } from 'parallax-controller';
 import { ParallaxProps } from '../components/Parallax/types';
-import { getParallaxProps } from '../helpers/getParallaxProps';
+import { getIsolatedParallaxProps } from '../helpers/getIsolatedParallaxProps';
 import { useParallaxController } from './useParallaxController';
@@ -12,2 +12,3 @@
   const ref = useRef<T>(null);
+  const { parallaxProps } = getIsolatedParallaxProps(props);
 
@@ -24,3 +25,3 @@ useVerifyController(controller);
         el: ref.current,
-        props: getParallaxProps(props),
+        props: parallaxProps,
       };
@@ -48,4 +49,3 @@ newElement = controller?.createElement(options);
       } else {
-        const newProps = getParallaxProps(props);
-        controller?.updateElementPropsById(element.id, newProps);
+        controller?.updateElementPropsById(element.id, parallaxProps);
       }
@@ -52,0 +52,0 @@ }

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

167161

increased by7.07%

Lines of code

2560

increased by1.35%

Worsened metrics

Number of package files

58

decreased by-3.33%

No dependency changes