react-scroll-parallax - npm Package Compare versions

Comparing version 3.0.0-alpha.15 to 3.0.0-alpha.16

dist/components/Parallax/index.d.ts

@@ -8,4 +8,4 @@ import { PropsWithChildren } from 'react';
         tagInner: string;
-        tagOuter: string;
+        tag: string;
     };
 }

dist/components/Parallax/types.d.ts

@@ -152,6 +152,10 @@ import { RootMarginShape, ValidEasingPresets } from 'parallax-controller';
     /**
-     * Optionally pass additional class names to be added to the outermost parallax element.
+     * Class names to be added to the outermost parallax element.
      */
     className?: string;
     /**
+     * Class names to be added to the outermost parallax element.
+     */
+    innerClassName?: string;
+    /**
      * Disables parallax effects on individual elements when true.
@@ -161,17 +165,17 @@ */
     /**
-     * Optionally pass a style object to be added to the innermost parallax element.
+     * Style object to be added to the innermost parallax element.
      */
     styleInner?: any;
     /**
-     * Optionally pass a style object to be added to the outermost parallax element.
+     * Style object to be added to the outermost parallax element.
      */
-    styleOuter?: any;
+    style?: any;
     /**
-     * Optionally pass an element tag name to be applied to the innermost parallax element.
+     * HTML element tag name to be applied to the innermost parallax element.
      */
     tagInner?: any;
     /**
-     * Optionally pass an element tag name to be applied to the outermost parallax element.
+     * HTML element tag name to be applied to the outermost parallax element.
      */
-    tagOuter?: any;
+    tag?: any;
     /**
@@ -178,0 +182,0 @@ * Callback for when the progress of an element in the viewport changes.

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

@@ -118,11 +118,10 @@ 'use strict';
   }, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity, props.easing, props.rootMargin, props.onProgressChange, props.onEnter, props.onExit]);
-  var Outer = props.tagOuter;
+  var Outer = props.tag;
   var Inner = props.tagInner;
-  var rootClass = 'parallax-outer' + (props.className ? " " + props.className : '');
   return React__default.createElement(Outer, {
-    className: rootClass,
+    className: props.className,
     ref: refOuter,
-    style: props.styleOuter
+    style: props.style
   }, React__default.createElement(Inner, {
-    className: "parallax-inner",
+    className: props.innerClassName,
     ref: refInner,
@@ -135,3 +134,3 @@ style: props.styleInner
   tagInner: 'div',
-  tagOuter: 'div'
+  tag: 'div'
 };
@@ -225,3 +224,3 @@
       styleInner: absoluteStyle,
-      styleOuter: absoluteStyle,
+      style: absoluteStyle,
       disabled: disabled
@@ -228,0 +227,0 @@ }, React__default.createElement("div", Object.assign({

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

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("parallax-controller"),n=r.createContext(null);function o(){var e=t.useContext(n);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(),l=t.useRef(),s=t.useRef();function i(){var t,r=void 0!==e.speed,a=e.translateX,o=e.translateY;return r&&"horizontal"==(null==n?void 0:n.scrollAxis)&&(a=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),r&&"vertical"==(null==n?void 0:n.scrollAxis)&&(o=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),{elInner:l.current,elOuter:s.current,props:(t={disabled:e.disabled,translateX:a,translateY:o,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,onEnter:e.onEnter,onExit:e.onExit},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t)}}!function(e){t.useEffect((function(){if(!("undefined"==typeof window||e||e instanceof a.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(n);var c=t.useState(),u=c[0],d=c[1];return t.useEffect((function(){var e=null==n?void 0:n.createElement(i());return d(e),function(){e&&(null==n||n.removeElementById(e.id))}}),[]),t.useEffect((function(){u&&(e.disabled?null==n||n.resetElementStyles(u):null==n||n.updateElementPropsById(u.id,i().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.onEnter,e.onExit]),r.createElement(e.tagOuter,{className:"parallax-outer"+(e.className?" "+e.className:""),ref:s,style:e.styleOuter},r.createElement(e.tagInner,{className:"parallax-inner",ref:l,style:e.styleInner},e.children))}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e}).apply(this,arguments)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}l.defaultProps={disabled:!1,tagInner:"div",tagOuter:"div"};var c={position:"relative",overflow:"hidden",width:"100%",height:"50vh"},u={position:"absolute",top:0,right:0,bottom:0,left:0},d=function(e){var t=e.children,a=e.className,n=e.layers,o=e.disabled;return r.createElement("div",{style:s({},c,e.style),className:"parallax-banner"+(a?" "+a:"")},n.map((function(e,t){var a=e.speed,n=e.children,i=e.expanded,c=void 0===i||i,d=e.image,p=e.props,f=void 0===p?{}:p,v=f.style||{},x=f.className||"";delete f.style,delete f.className;var y="parallax-banner-layer-"+t+(x?" "+x:""),h=c?{top:10*Math.abs(a)*-1+"px",bottom:10*Math.abs(a)*-1+"px"}:{};return r.createElement(l,{key:"layer-"+t,speed:a,styleInner:u,styleOuter:u,disabled:o},r.createElement("div",Object.assign({className:y,style:s({},d?{backgroundImage:"url("+d+")",backgroundPosition:"center",backgroundSize:"cover"}:{},u,h,v)},f),n))})),t)};d.defaultProps={disabled:!1};var p=function(e){var t,o;function l(t){var r;return(r=e.call(this,t)||this).controller="undefined"==typeof window?null:a.ParallaxController.init({scrollAxis:t.scrollAxis,scrollContainer:t.scrollContainer}),r}o=e,(t=l).prototype=Object.create(o.prototype),t.prototype.constructor=t,i(t,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 r.createElement(n.Provider,{value:this.controller},this.props.children)},l}(t.Component);p.defaultProps={scrollAxis:a.ScrollAxis.vertical},exports.Parallax=l,exports.ParallaxBanner=d,exports.ParallaxContext=n,exports.ParallaxProvider=p,exports.useController=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("parallax-controller"),a=r.createContext(null);function o(){var e=t.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 a=o(),l=t.useRef(),s=t.useRef();function i(){var t,r=void 0!==e.speed,n=e.translateX,o=e.translateY;return r&&"horizontal"==(null==a?void 0:a.scrollAxis)&&(n=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),r&&"vertical"==(null==a?void 0:a.scrollAxis)&&(o=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),{elInner:l.current,elOuter:s.current,props:(t={disabled:e.disabled,translateX:n,translateY:o,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,onEnter:e.onEnter,onExit:e.onExit},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t)}}!function(e){t.useEffect((function(){if(!("undefined"==typeof window||e||e instanceof n.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(a);var c=t.useState(),d=c[0],u=c[1];return t.useEffect((function(){var e=null==a?void 0:a.createElement(i());return u(e),function(){e&&(null==a||a.removeElementById(e.id))}}),[]),t.useEffect((function(){d&&(e.disabled?null==a||a.resetElementStyles(d):null==a||a.updateElementPropsById(d.id,i().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.onEnter,e.onExit]),r.createElement(e.tag,{className:e.className,ref:s,style:e.style},r.createElement(e.tagInner,{className:e.innerClassName,ref:l,style:e.styleInner},e.children))}function s(){return(s=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 i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}l.defaultProps={disabled:!1,tagInner:"div",tag:"div"};var c={position:"relative",overflow:"hidden",width:"100%",height:"50vh"},d={position:"absolute",top:0,right:0,bottom:0,left:0},u=function(e){var t=e.children,n=e.className,a=e.layers,o=e.disabled;return r.createElement("div",{style:s({},c,e.style),className:"parallax-banner"+(n?" "+n:"")},a.map((function(e,t){var n=e.speed,a=e.children,i=e.expanded,c=void 0===i||i,u=e.image,p=e.props,f=void 0===p?{}:p,v=f.style||{},x=f.className||"";delete f.style,delete f.className;var y="parallax-banner-layer-"+t+(x?" "+x:""),h=c?{top:10*Math.abs(n)*-1+"px",bottom:10*Math.abs(n)*-1+"px"}:{};return r.createElement(l,{key:"layer-"+t,speed:n,styleInner:d,style:d,disabled:o},r.createElement("div",Object.assign({className:y,style:s({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},d,h,v)},f),a))})),t)};u.defaultProps={disabled:!1};var p=function(e){var t,o;function l(t){var r;return(r=e.call(this,t)||this).controller="undefined"==typeof window?null:n.ParallaxController.init({scrollAxis:t.scrollAxis,scrollContainer:t.scrollContainer}),r}o=e,(t=l).prototype=Object.create(o.prototype),t.prototype.constructor=t,i(t,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 r.createElement(a.Provider,{value:this.controller},this.props.children)},l}(t.Component);p.defaultProps={scrollAxis:n.ScrollAxis.vertical},exports.Parallax=l,exports.ParallaxBanner=u,exports.ParallaxContext=a,exports.ParallaxProvider=p,exports.useController=o;
 //# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map

dist/react-scroll-parallax.esm.js

@@ -111,11 +111,10 @@ import React, { useContext, useEffect, useRef, useState, Component } from 'react';
   }, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity, props.easing, props.rootMargin, props.onProgressChange, props.onEnter, props.onExit]);
-  var Outer = props.tagOuter;
+  var Outer = props.tag;
   var Inner = props.tagInner;
-  var rootClass = 'parallax-outer' + (props.className ? " " + props.className : '');
   return React.createElement(Outer, {
-    className: rootClass,
+    className: props.className,
     ref: refOuter,
-    style: props.styleOuter
+    style: props.style
   }, React.createElement(Inner, {
-    className: "parallax-inner",
+    className: props.innerClassName,
     ref: refInner,
@@ -128,3 +127,3 @@ style: props.styleInner
   tagInner: 'div',
-  tagOuter: 'div'
+  tag: 'div'
 };
@@ -218,3 +217,3 @@
       styleInner: absoluteStyle,
-      styleOuter: absoluteStyle,
+      style: absoluteStyle,
       disabled: disabled
@@ -221,0 +220,0 @@ }, React.createElement("div", Object.assign({

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "3.0.0-alpha.15",
+  "version": "3.0.0-alpha.16",
   "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -7,3 +7,3 @@ # React Scroll Parallax
 
-If you're coming from [v1](https://github.com/jscottsmith/react-scroll-parallax/tree/v1), here's a [migration guide](https://github.com/jscottsmith/react-scroll-parallax/blob/master/docs/migration-guide.md).
+If you're coming from [V2](https://github.com/jscottsmith/react-scroll-parallax/tree/v2.4.2), here's a [migration guide](https://github.com/jscottsmith/react-scroll-parallax/blob/master/docs/migration-guide.md).
 
@@ -10,0 +10,0 @@ ## Examples

src/components/Parallax/types.ts

@@ -155,6 +155,10 @@ import { RootMarginShape, ValidEasingPresets } from 'parallax-controller';
   /**
-   * Optionally pass additional class names to be added to the outermost parallax element.
+   * Class names to be added to the outermost parallax element.
    */
   className?: string;
   /**
+   * Class names to be added to the outermost parallax element.
+   */
+  innerClassName?: string;
+  /**
    * Disables parallax effects on individual elements when true.
@@ -164,17 +168,17 @@ */
   /**
-   * Optionally pass a style object to be added to the innermost parallax element.
+   * Style object to be added to the innermost parallax element.
    */
   styleInner?: any;
   /**
-   * Optionally pass a style object to be added to the outermost parallax element.
+   * Style object to be added to the outermost parallax element.
    */
-  styleOuter?: any;
+  style?: any;
   /**
-   * Optionally pass an element tag name to be applied to the innermost parallax element.
+   * HTML element tag name to be applied to the innermost parallax element.
    */
   tagInner?: any;
   /**
-   * Optionally pass an element tag name to be applied to the outermost parallax element.
+   * HTML element tag name to be applied to the outermost parallax element.
    */
-  tagOuter?: any;
+  tag?: any;
 
@@ -181,0 +185,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

Lines of code

1933

increased by0.36%

Worsened metrics

Total package byte prevSize

129834

decreased by-0.76%

No dependency changes