react-scroll-parallax - npm Package Compare versions

Comparing version 3.0.0-beta.4 to 3.0.0-beta.5

dist/components/Parallax/index.d.ts

@@ -7,6 +7,4 @@ import { PropsWithChildren } from 'react';
         disabled: boolean;
-        innerTag: string;
         tag: string;
     };
 }
-export declare const Component: () => JSX.Element;

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

@@ -53,16 +53,2 @@ 'use strict';
   function _getElementOptions() {
-    var shouldUseSpeedProp = typeof props.speed !== 'undefined';
-    var isHorizontal = (controller == null ? void 0 : controller.scrollAxis) == 'horizontal';
-    var isVertical = (controller == null ? void 0 : controller.scrollAxis) == 'vertical';
-    var translateX = props.translateX;
-    var translateY = props.translateY; // TODO: move to parallax-controller
-
-    if (shouldUseSpeedProp && isHorizontal) {
-      translateX = [(props.speed || 0) * 10 + "px", (props.speed || 0) * -10 + "px"];
-    }
-
-    if (shouldUseSpeedProp && isVertical) {
-      translateY = [(props.speed || 0) * 10 + "px", (props.speed || 0) * -10 + "px"];
-    }
-
     return {
@@ -72,4 +58,5 @@ // @ts-expect-error
       props: removeUndefinedObjectKeys({
-        translateX: translateX,
-        translateY: translateY,
+        speed: props.speed,
+        translateX: props.translateX,
+        translateY: props.translateY,
         disabled: props.disabled,
@@ -131,4 +118,3 @@ rotate: props.rotate,
 function Parallax(props) {
-  var Outer = props.tag;
-  var Inner = props.innerTag;
+  var Tag = props.tag;
 
@@ -138,14 +124,10 @@ var _useParallax = useParallax(props),
 
-  return React__default.createElement(Outer, {
+  return React__default.createElement(Tag, {
     className: props.className,
-    style: props.style
-  }, React__default.createElement(Inner, {
-    className: props.innerClassName,
-    ref: ref,
-    style: props.innerStyle
-  }, props.children));
+    style: props.style,
+    ref: ref
+  }, props.children);
 }
 Parallax.defaultProps = {
   disabled: false,
-  innerTag: 'div',
   tag: 'div'
@@ -239,3 +221,2 @@ };
       speed: speed,
-      innerStyle: absoluteStyle,
       style: absoluteStyle,
@@ -242,0 +223,0 @@ disabled: disabled

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,a=n.createContext(null);function o(){var e=r.useContext(a);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 l(e){var n=o(),a=r.useRef(null);function l(){var t,r=void 0!==e.speed,o=e.translateX,l=e.translateY;return r&&"horizontal"==(null==n?void 0:n.scrollAxis)&&(o=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),r&&"vertical"==(null==n?void 0:n.scrollAxis)&&(l=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),{el:a.current,props:(t={translateX:o,translateY:l,disabled:e.disabled,rotate:e.rotate,rotateX:e.rotateX,rotateY:e.rotateY,rotateZ:e.rotateZ,scale:e.scale,scaleX:e.scaleX,scaleY:e.scaleY,scaleZ:e.scaleZ,opacity:e.opacity,easing:e.easing,rootMargin:e.rootMargin,shouldStartAnimationInitialInView:e.shouldStartAnimationInitialInView,onProgressChange:e.onProgressChange,onChange:e.onChange,onEnter:e.onEnter,onExit:e.onExit,startScroll:e.startScroll,endScroll:e.endScroll,targetElement:e.targetElement},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t)}}!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 s=r.useState(),i=s[0],c=s[1];return r.useEffect((function(){var e=null==n?void 0:n.createElement(l());return c(e),function(){e&&(null==n||n.removeElementById(e.id))}}),[]),r.useEffect((function(){i&&(e.disabled?null==n||n.resetElementStyles(i):null==n||n.updateElementPropsById(i.id,l().props))}),[e.disabled,e.translateX,e.translateY,e.rotate,e.rotateX,e.rotateY,e.rotateZ,e.scale,e.scaleX,e.scaleY,e.scaleZ,e.speed,e.opacity,e.easing,e.rootMargin,e.onProgressChange,e.onChange,e.onEnter,e.onExit,e.targetElement]),{ref:a,controller:n,element:i}}function s(e){var t=e.tag,r=e.innerTag,a=l(e);return n.createElement(t,{className:e.className,style:e.style},n.createElement(r,{className:e.innerClassName,ref:a.ref,style:e.innerStyle},e.children))}function i(){return(i=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 c(e,t){return(c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}s.defaultProps={disabled:!1,innerTag:"div",tag:"div"};var u={position:"relative",overflow:"hidden",width:"100%",height:"50vh"},d={position:"absolute",top:0,right:0,bottom:0,left:0},p=function(e){var t=e.children,r=e.className,a=e.layers,o=e.disabled;return n.createElement("div",{style:i({},u,e.style),className:"parallax-banner"+(r?" "+r:"")},a.map((function(e,t){var r=e.speed,a=e.children,l=e.expanded,c=void 0===l||l,u=e.image,p=e.props,f=void 0===p?{}:p,v=f.style||{},x=f.className||"";delete f.style,delete f.className;var m="parallax-banner-layer-"+t+(x?" "+x:""),y=c?{top:10*Math.abs(r)*-1+"px",bottom:10*Math.abs(r)*-1+"px"}:{};return n.createElement(s,{key:"layer-"+t,speed:r,innerStyle:d,style:d,disabled:o},n.createElement("div",Object.assign({className:m,style:i({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},d,y,v)},f),a))})),t)};p.defaultProps={disabled:!1};var f=function(e){var r,o;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}o=e,(r=l).prototype=Object.create(o.prototype),r.prototype.constructor=r,c(r,o);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(a.Provider,{value:this.controller},this.props.children)},l}(r.Component);f.defaultProps={scrollAxis:t.ScrollAxis.vertical},Object.defineProperty(exports,"EasingPreset",{enumerable:!0,get:function(){return t.EasingPreset}}),exports.Parallax=s,exports.ParallaxBanner=p,exports.ParallaxContext=a,exports.ParallaxProvider=f,exports.useController=o,exports.useParallax=l;
+"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,a=n.createContext(null);function o(){var e=r.useContext(a);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 l(e){var n=o(),a=r.useRef(null);function l(){return{el:a.current,props:(t={speed:e.speed,translateX:e.translateX,translateY:e.translateY,disabled:e.disabled,rotate:e.rotate,rotateX:e.rotateX,rotateY:e.rotateY,rotateZ:e.rotateZ,scale:e.scale,scaleX:e.scaleX,scaleY:e.scaleY,scaleZ:e.scaleZ,opacity:e.opacity,easing:e.easing,rootMargin:e.rootMargin,shouldStartAnimationInitialInView:e.shouldStartAnimationInitialInView,onProgressChange:e.onProgressChange,onChange:e.onChange,onEnter:e.onEnter,onExit:e.onExit,startScroll:e.startScroll,endScroll:e.endScroll,targetElement:e.targetElement},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t)};var t}!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 s=r.useState(),i=s[0],c=s[1];return r.useEffect((function(){var e=null==n?void 0:n.createElement(l());return c(e),function(){e&&(null==n||n.removeElementById(e.id))}}),[]),r.useEffect((function(){i&&(e.disabled?null==n||n.resetElementStyles(i):null==n||n.updateElementPropsById(i.id,l().props))}),[e.disabled,e.translateX,e.translateY,e.rotate,e.rotateX,e.rotateY,e.rotateZ,e.scale,e.scaleX,e.scaleY,e.scaleZ,e.speed,e.opacity,e.easing,e.rootMargin,e.onProgressChange,e.onChange,e.onEnter,e.onExit,e.targetElement]),{ref:a,controller:n,element:i}}function s(e){var t=e.tag,r=l(e);return n.createElement(t,{className:e.className,style:e.style,ref:r.ref},e.children)}function i(){return(i=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 c(e,t){return(c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}s.defaultProps={disabled:!1,tag:"div"};var u={position:"relative",overflow:"hidden",width:"100%",height:"50vh"},d={position:"absolute",top:0,right:0,bottom:0,left:0},p=function(e){var t=e.children,r=e.className,a=e.layers,o=e.disabled;return n.createElement("div",{style:i({},u,e.style),className:"parallax-banner"+(r?" "+r:"")},a.map((function(e,t){var r=e.speed,a=e.children,l=e.expanded,c=void 0===l||l,u=e.image,p=e.props,f=void 0===p?{}:p,v=f.style||{},h=f.className||"";delete f.style,delete f.className;var x="parallax-banner-layer-"+t+(h?" "+h:""),m=c?{top:10*Math.abs(r)*-1+"px",bottom:10*Math.abs(r)*-1+"px"}:{};return n.createElement(s,{key:"layer-"+t,speed:r,style:d,disabled:o},n.createElement("div",Object.assign({className:x,style:i({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},d,m,v)},f),a))})),t)};p.defaultProps={disabled:!1};var f=function(e){var r,o;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}o=e,(r=l).prototype=Object.create(o.prototype),r.prototype.constructor=r,c(r,o);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(a.Provider,{value:this.controller},this.props.children)},l}(r.Component);f.defaultProps={scrollAxis:t.ScrollAxis.vertical},Object.defineProperty(exports,"EasingPreset",{enumerable:!0,get:function(){return t.EasingPreset}}),exports.Parallax=s,exports.ParallaxBanner=p,exports.ParallaxContext=a,exports.ParallaxProvider=f,exports.useController=o,exports.useParallax=l;
 //# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map

dist/react-scroll-parallax.esm.js

@@ -47,16 +47,2 @@ import { ParallaxController, ScrollAxis } from 'parallax-controller';
   function _getElementOptions() {
-    var shouldUseSpeedProp = typeof props.speed !== 'undefined';
-    var isHorizontal = (controller == null ? void 0 : controller.scrollAxis) == 'horizontal';
-    var isVertical = (controller == null ? void 0 : controller.scrollAxis) == 'vertical';
-    var translateX = props.translateX;
-    var translateY = props.translateY; // TODO: move to parallax-controller
-
-    if (shouldUseSpeedProp && isHorizontal) {
-      translateX = [(props.speed || 0) * 10 + "px", (props.speed || 0) * -10 + "px"];
-    }
-
-    if (shouldUseSpeedProp && isVertical) {
-      translateY = [(props.speed || 0) * 10 + "px", (props.speed || 0) * -10 + "px"];
-    }
-
     return {
@@ -66,4 +52,5 @@ // @ts-expect-error
       props: removeUndefinedObjectKeys({
-        translateX: translateX,
-        translateY: translateY,
+        speed: props.speed,
+        translateX: props.translateX,
+        translateY: props.translateY,
         disabled: props.disabled,
@@ -125,4 +112,3 @@ rotate: props.rotate,
 function Parallax(props) {
-  var Outer = props.tag;
-  var Inner = props.innerTag;
+  var Tag = props.tag;
 
@@ -132,14 +118,10 @@ var _useParallax = useParallax(props),
 
-  return React.createElement(Outer, {
+  return React.createElement(Tag, {
     className: props.className,
-    style: props.style
-  }, React.createElement(Inner, {
-    className: props.innerClassName,
-    ref: ref,
-    style: props.innerStyle
-  }, props.children));
+    style: props.style,
+    ref: ref
+  }, props.children);
 }
 Parallax.defaultProps = {
   disabled: false,
-  innerTag: 'div',
   tag: 'div'
@@ -233,3 +215,2 @@ };
       speed: speed,
-      innerStyle: absoluteStyle,
       style: absoluteStyle,
@@ -236,0 +217,0 @@ disabled: disabled

dist/types.d.ts

@@ -17,10 +17,2 @@ import { ParallaxElementConfig } from 'parallax-controller';
     /**
-     * Class names to be added to the outermost parallax element.
-     */
-    innerClassName?: string;
-    /**
-     * Style object to be added to the innermost parallax element.
-     */
-    innerStyle?: any;
-    /**
      * Style object to be added to the outermost parallax element.
@@ -30,6 +22,2 @@ */
     /**
-     * HTML element tag name to be applied to the innermost parallax element.
-     */
-    innerTag?: any;
-    /**
      * HTML element tag name to be applied to the outermost parallax element.
@@ -36,0 +24,0 @@ */

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
@@ -86,3 +86,3 @@ "keywords": [
   "dependencies": {
-    "parallax-controller": "^1.0.3"
+    "parallax-controller": "^1.1.0"
   },
@@ -89,0 +89,0 @@ "devDependencies": {

src/hooks/useParallax.ts

@@ -15,24 +15,2 @@ import { CreateElementOptions, Element } from 'parallax-controller';
   function _getElementOptions(): CreateElementOptions {
-    const shouldUseSpeedProp = typeof props.speed !== 'undefined';
-    const isHorizontal = controller?.scrollAxis == 'horizontal';
-    const isVertical = controller?.scrollAxis == 'vertical';
-
-    let translateX = props.translateX;
-    let translateY = props.translateY;
-
-    // TODO: move to parallax-controller
-    if (shouldUseSpeedProp && isHorizontal) {
-      translateX = [
-        `${(props.speed || 0) * 10}px`,
-        `${(props.speed || 0) * -10}px`,
-      ];
-    }
-
-    if (shouldUseSpeedProp && isVertical) {
-      translateY = [
-        `${(props.speed || 0) * 10}px`,
-        `${(props.speed || 0) * -10}px`,
-      ];
-    }
-
     return {
@@ -42,4 +20,5 @@ // @ts-expect-error
       props: removeUndefinedObjectKeys({
-        translateX,
-        translateY,
+        speed: props.speed,
+        translateX: props.translateX,
+        translateY: props.translateY,
         disabled: props.disabled,
@@ -46,0 +25,0 @@ rotate: props.rotate,

src/types.ts

@@ -18,10 +18,2 @@ import { ParallaxElementConfig } from 'parallax-controller';
   /**
-   * Class names to be added to the outermost parallax element.
-   */
-  innerClassName?: string;
-  /**
-   * Style object to be added to the innermost parallax element.
-   */
-  innerStyle?: any;
-  /**
    * Style object to be added to the outermost parallax element.
@@ -31,6 +23,2 @@ */
   /**
-   * HTML element tag name to be applied to the innermost parallax element.
-   */
-  innerTag?: any;
-  /**
    * HTML element tag name to be applied to the outermost parallax element.
@@ -37,0 +25,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

Worsened metrics

Total package byte prevSize

116401

decreased by-7.87%

Lines of code

1602

decreased by-5.82%

Dependency changes

• Updatedparallax-controller@^1.1.0