react-scroll-parallax - npm Package Compare versions

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

dist/components/Parallax/index.d.ts

 import { PropsWithChildren } from 'react';
-import { ParallaxProps } from '../../types';
+import { ParallaxProps } from './types';
 export declare function Parallax(props: PropsWithChildren<ParallaxProps>): JSX.Element;

dist/components/ParallaxBanner/index.d.ts

 import { PropsWithChildren } from 'react';
 import { ParallaxBannerProps } from './types';
-export declare const ParallaxBanner: ({ children, className, layers, style, disabled, }: PropsWithChildren<ParallaxBannerProps>) => JSX.Element;
+export declare const ParallaxBanner: (props: PropsWithChildren<ParallaxBannerProps>) => JSX.Element;

dist/components/ParallaxBanner/types.d.ts

@@ -1,11 +0,5 @@
-export interface BannerLayer {
+import { ParallaxElementConfig } from 'parallax-controller';
+import { HTMLAttributes } from 'react';
+export interface BannerLayer extends ParallaxElementConfig, Omit<HTMLAttributes<{}>, 'onChange'> {
     /**
-     * A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster.
-     */
-    speed: number;
-    /**
-     * Custom layer children provided as a React element, for example `<Video />`
-     */
-    children?: any;
-    /**
      * Indicate if the layer should be expanded with negative top/bottom margins so the edges will
@@ -19,21 +13,12 @@ * never be visible.
     image?: string;
-    props?: any;
 }
-export interface ParallaxBannerProps {
+export interface ParallaxBannerProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
-     * Optionally pass additional class names to be added to the outermost parallax banner element.
+     * An Array of banner layers.
      */
-    className?: string;
+    layers?: BannerLayer[];
     /**
-     * Determines if the internal parallax layers will have offsets applied.
+     * Determines if all internal layers will be disabled
      */
     disabled?: boolean;
-    /**
-     * A required Array of Objects with layer properties: `[{ amount: 0.1, image: 'foo.jpg' }]`.
-     */
-    layers: BannerLayer[];
-    /**
-     * Optionally pass a style object to be added to the outermost parallax banner element.
-     */
-    style?: any;
 }

dist/hooks/useParallax.d.ts

 /// <reference types="react" />
 import { Element } from 'parallax-controller';
-import { ParallaxProps } from '../types';
+import { ParallaxProps } from '../components/Parallax/types';
 export declare function useParallax<T extends HTMLElement>(props: ParallaxProps): {
@@ -5,0 +5,0 @@ ref: import("react").RefObject<T>;

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

@@ -11,2 +11,111 @@ 'use strict';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+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"];
+function getIsolatedParallaxProps(props) {
+  var disabled = props.disabled,
+      easing = props.easing,
+      endScroll = props.endScroll,
+      onChange = props.onChange,
+      onEnter = props.onEnter,
+      onExit = props.onExit,
+      onProgressChange = props.onProgressChange,
+      opacity = props.opacity,
+      rootMargin = props.rootMargin,
+      rotate = props.rotate,
+      rotateX = props.rotateX,
+      rotateY = props.rotateY,
+      rotateZ = props.rotateZ,
+      scale = props.scale,
+      scaleX = props.scaleX,
+      scaleY = props.scaleY,
+      scaleZ = props.scaleZ,
+      shouldAlwaysCompleteAnimation = props.shouldAlwaysCompleteAnimation,
+      shouldDisableScalingTranslations = props.shouldDisableScalingTranslations,
+      speed = props.speed,
+      startScroll = props.startScroll,
+      targetElement = props.targetElement,
+      translateX = props.translateX,
+      translateY = props.translateY,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var parallaxProps = {
+    disabled: disabled,
+    easing: easing,
+    endScroll: endScroll,
+    onChange: onChange,
+    onEnter: onEnter,
+    onExit: onExit,
+    onProgressChange: onProgressChange,
+    opacity: opacity,
+    rootMargin: rootMargin,
+    rotate: rotate,
+    rotateX: rotateX,
+    rotateY: rotateY,
+    rotateZ: rotateZ,
+    scale: scale,
+    scaleX: scaleX,
+    scaleY: scaleY,
+    scaleZ: scaleZ,
+    shouldAlwaysCompleteAnimation: shouldAlwaysCompleteAnimation,
+    shouldDisableScalingTranslations: shouldDisableScalingTranslations,
+    speed: speed,
+    startScroll: startScroll,
+    targetElement: targetElement,
+    translateX: translateX,
+    translateY: translateY
+  };
+  return {
+    parallaxProps: parallaxProps,
+    rest: rest
+  };
+}
+
 function useVerifyController(controller) {
@@ -32,27 +141,6 @@ React.useEffect(function () {
 function getParallaxProps(props) {
-  return removeUndefinedObjectKeys({
-    speed: props.speed,
-    translateX: props.translateX,
-    translateY: props.translateY,
-    disabled: props.disabled,
-    rotate: props.rotate,
-    rotateX: props.rotateX,
-    rotateY: props.rotateY,
-    rotateZ: props.rotateZ,
-    scale: props.scale,
-    scaleX: props.scaleX,
-    scaleY: props.scaleY,
-    scaleZ: props.scaleZ,
-    opacity: props.opacity,
-    easing: props.easing,
-    rootMargin: props.rootMargin,
-    shouldAlwaysCompleteAnimation: props.shouldAlwaysCompleteAnimation,
-    onProgressChange: props.onProgressChange,
-    onChange: props.onChange,
-    onEnter: props.onEnter,
-    onExit: props.onExit,
-    startScroll: props.startScroll,
-    endScroll: props.endScroll,
-    targetElement: props.targetElement
-  });
+  var _getIsolatedParallaxP = getIsolatedParallaxProps(props),
+      parallaxProps = _getIsolatedParallaxP.parallaxProps;
+
+  return removeUndefinedObjectKeys(_extends({}, parallaxProps));
 }
@@ -117,3 +205,3 @@
     }
-  }, [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.onChange, props.onEnter, props.onExit, props.targetElement]);
+  }, [props.disabled, props.easing, props.endScroll, props.onChange, props.onEnter, props.onExit, props.onProgressChange, props.opacity, props.rootMargin, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.shouldAlwaysCompleteAnimation, props.shouldDisableScalingTranslations, props.speed, props.startScroll, props.targetElement, props.translateX, props.translateY]);
   return {
@@ -127,53 +215,20 @@ ref: ref,
 function Parallax(props) {
-  var Tag = props.tag || 'div';
+  var _getIsolatedParallaxP = getIsolatedParallaxProps(props),
+      parallaxProps = _getIsolatedParallaxP.parallaxProps,
+      rest = _getIsolatedParallaxP.rest;
 
-  var _useParallax = useParallax(props),
+  var _useParallax = useParallax(parallaxProps),
       ref = _useParallax.ref;
 
-  return React__default.createElement(Tag, {
-    className: props.className,
-    style: props.style,
+  return React__default.createElement("div", Object.assign({
     ref: ref
-  }, props.children);
+  }, rest), props.children);
 }
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
+var _excluded$1 = ["disabled", "style", "layers"],
+    _excluded2 = ["children", "disabled", "style", "expanded", "image"];
 var containerStyle = {
   position: 'relative',
   overflow: 'hidden',
-  width: '100%',
-  height: '50vh'
+  width: '100%'
 };
@@ -183,53 +238,54 @@ var absoluteStyle = {
   top: 0,
+  left: 0,
   right: 0,
-  bottom: 0,
-  left: 0
+  bottom: 0
 };
-var ParallaxBanner = function ParallaxBanner(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      layers = _ref.layers,
-      style = _ref.style,
-      disabled = _ref.disabled;
-  return React__default.createElement("div", {
-    style: _extends({}, containerStyle, style),
-    className: 'parallax-banner' + (className ? " " + className : '')
-  }, layers.map(function (_ref2, i) {
-    var speed = _ref2.speed,
-        layerChildren = _ref2.children,
-        _ref2$expanded = _ref2.expanded,
-        expanded = _ref2$expanded === void 0 ? true : _ref2$expanded,
-        image = _ref2.image,
-        _ref2$props = _ref2.props,
-        props = _ref2$props === void 0 ? {} : _ref2$props;
-    // save props to be merged
-    var layerStyle = props.style || {};
-    var layerClass = props.className || ''; // remove from pass through props
 
-    delete props.style;
-    delete props.className;
-    var layerClassMerged = "parallax-banner-layer-" + i + (layerClass ? " " + layerClass : ''); // if this is an expanded layer overwrite the top/bottom styles with negative margins
+function getExpandedStyle(expanded, layer) {
+  var speed = layer.speed || 0;
+  return expanded ? {
+    top: Math.abs(speed) * 10 * -1 + 'px',
+    bottom: Math.abs(speed) * 10 * -1 + 'px'
+  } : {};
+}
 
-    var expandedStyle = expanded ? {
-      top: Math.abs(speed) * 10 * -1 + 'px',
-      bottom: Math.abs(speed) * 10 * -1 + 'px'
-    } : {}; // optional image styles
+function getImageStyle(layer) {
+  return layer.image ? {
+    backgroundImage: "url(" + layer.image + ")",
+    backgroundPosition: 'center',
+    backgroundSize: 'cover'
+  } : {};
+}
 
-    var imageStyle = image ? {
-      backgroundImage: "url(" + image + ")",
-      backgroundPosition: 'center',
-      backgroundSize: 'cover'
-    } : {};
+var ParallaxBanner = function ParallaxBanner(props) {
+  var rootStyle = props.style,
+      _props$layers = props.layers,
+      layers = _props$layers === void 0 ? [] : _props$layers,
+      rootRest = _objectWithoutPropertiesLoose(props, _excluded$1);
+
+  return React__default.createElement("div", Object.assign({
+    style: _extends({}, containerStyle, rootStyle)
+  }, rootRest), layers.map(function (layer, i) {
+    var _getIsolatedParallaxP = getIsolatedParallaxProps(layer),
+        parallaxProps = _getIsolatedParallaxP.parallaxProps,
+        rest = _getIsolatedParallaxP.rest;
+
+    var style = rest.style,
+        _rest$expanded = rest.expanded,
+        expanded = _rest$expanded === void 0 ? true : _rest$expanded,
+        divProps = _objectWithoutPropertiesLoose(rest, _excluded2);
+
     var key = "layer-" + i;
-    return React__default.createElement(Parallax, {
+    var imageStyle = getImageStyle(layer);
+    var expandedStyle = getExpandedStyle(expanded, layer);
+    var parallax = useParallax(_extends({
+      shouldDisableScalingTranslations: true
+    }, parallaxProps));
+    return React__default.createElement("div", Object.assign({
+      "data-testid": key,
       key: key,
-      speed: speed,
-      style: absoluteStyle,
-      disabled: disabled
-    }, React__default.createElement("div", Object.assign({
-      "data-testid": key,
-      className: layerClassMerged,
-      style: _extends({}, imageStyle, absoluteStyle, expandedStyle, layerStyle)
-    }, props), layerChildren));
-  }), children);
+      ref: parallax.ref,
+      style: _extends({}, imageStyle, absoluteStyle, expandedStyle, style)
+    }, divProps), rest.children);
+  }), props.children);
 };
@@ -236,0 +292,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(e){return 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,shouldAlwaysCompleteAnimation:e.shouldAlwaysCompleteAnimation,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}var o=n.createContext(null);function l(){var e=r.useContext(o);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 s(e){var n=l(),o=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 s=r.useState(),i=s[0],c=s[1];return r.useEffect((function(){var t;if(!(o.current instanceof HTMLElement))throw new Error("You must assign the ref returned by the useParallax() hook to an HTML Element.");var r={el:o.current,props:a(e)};return t=null==n?void 0:n.createElement(r),c(t),function(){t&&(null==n||n.removeElementById(t.id))}}),[]),r.useEffect((function(){if(i)if(e.disabled)null==n||n.resetElementStyles(i);else{var t=a(e);null==n||n.updateElementPropsById(i.id,t)}}),[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:o,controller:n,element:i}}function i(e){var t=e.tag||"div",r=s(e);return n.createElement(t,{className:e.className,style:e.style,ref:r.ref},e.children)}function c(){return(c=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 u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var d={position:"relative",overflow:"hidden",width:"100%",height:"50vh"},p={position:"absolute",top:0,right:0,bottom:0,left:0},f=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,u(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(o.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=i,exports.ParallaxBanner=function(e){var t=e.children,r=e.className,a=e.layers,o=e.disabled;return n.createElement("div",{style:c({},d,e.style),className:"parallax-banner"+(r?" "+r:"")},a.map((function(e,t){var r=e.speed,a=e.children,l=e.expanded,s=void 0===l||l,u=e.image,d=e.props,f=void 0===d?{}:d,h=f.style||{},m=f.className||"";delete f.style,delete f.className;var v="parallax-banner-layer-"+t+(m?" "+m:""),x=s?{top:10*Math.abs(r)*-1+"px",bottom:10*Math.abs(r)*-1+"px"}:{},y="layer-"+t;return n.createElement(i,{key:y,speed:r,style:p,disabled:o},n.createElement("div",Object.assign({"data-testid":y,className:v,style:c({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},p,x,h)},f),a))})),t)},exports.ParallaxContext=o,exports.ParallaxProvider=f,exports.useParallax=s,exports.useParallaxController=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;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;
 //# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map

dist/react-scroll-parallax.esm.js

@@ -5,2 +5,111 @@ import { ParallaxController, ScrollAxis } from 'parallax-controller';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+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"];
+function getIsolatedParallaxProps(props) {
+  var disabled = props.disabled,
+      easing = props.easing,
+      endScroll = props.endScroll,
+      onChange = props.onChange,
+      onEnter = props.onEnter,
+      onExit = props.onExit,
+      onProgressChange = props.onProgressChange,
+      opacity = props.opacity,
+      rootMargin = props.rootMargin,
+      rotate = props.rotate,
+      rotateX = props.rotateX,
+      rotateY = props.rotateY,
+      rotateZ = props.rotateZ,
+      scale = props.scale,
+      scaleX = props.scaleX,
+      scaleY = props.scaleY,
+      scaleZ = props.scaleZ,
+      shouldAlwaysCompleteAnimation = props.shouldAlwaysCompleteAnimation,
+      shouldDisableScalingTranslations = props.shouldDisableScalingTranslations,
+      speed = props.speed,
+      startScroll = props.startScroll,
+      targetElement = props.targetElement,
+      translateX = props.translateX,
+      translateY = props.translateY,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var parallaxProps = {
+    disabled: disabled,
+    easing: easing,
+    endScroll: endScroll,
+    onChange: onChange,
+    onEnter: onEnter,
+    onExit: onExit,
+    onProgressChange: onProgressChange,
+    opacity: opacity,
+    rootMargin: rootMargin,
+    rotate: rotate,
+    rotateX: rotateX,
+    rotateY: rotateY,
+    rotateZ: rotateZ,
+    scale: scale,
+    scaleX: scaleX,
+    scaleY: scaleY,
+    scaleZ: scaleZ,
+    shouldAlwaysCompleteAnimation: shouldAlwaysCompleteAnimation,
+    shouldDisableScalingTranslations: shouldDisableScalingTranslations,
+    speed: speed,
+    startScroll: startScroll,
+    targetElement: targetElement,
+    translateX: translateX,
+    translateY: translateY
+  };
+  return {
+    parallaxProps: parallaxProps,
+    rest: rest
+  };
+}
+
 function useVerifyController(controller) {
@@ -26,27 +135,6 @@ useEffect(function () {
 function getParallaxProps(props) {
-  return removeUndefinedObjectKeys({
-    speed: props.speed,
-    translateX: props.translateX,
-    translateY: props.translateY,
-    disabled: props.disabled,
-    rotate: props.rotate,
-    rotateX: props.rotateX,
-    rotateY: props.rotateY,
-    rotateZ: props.rotateZ,
-    scale: props.scale,
-    scaleX: props.scaleX,
-    scaleY: props.scaleY,
-    scaleZ: props.scaleZ,
-    opacity: props.opacity,
-    easing: props.easing,
-    rootMargin: props.rootMargin,
-    shouldAlwaysCompleteAnimation: props.shouldAlwaysCompleteAnimation,
-    onProgressChange: props.onProgressChange,
-    onChange: props.onChange,
-    onEnter: props.onEnter,
-    onExit: props.onExit,
-    startScroll: props.startScroll,
-    endScroll: props.endScroll,
-    targetElement: props.targetElement
-  });
+  var _getIsolatedParallaxP = getIsolatedParallaxProps(props),
+      parallaxProps = _getIsolatedParallaxP.parallaxProps;
+
+  return removeUndefinedObjectKeys(_extends({}, parallaxProps));
 }
@@ -111,3 +199,3 @@
     }
-  }, [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.onChange, props.onEnter, props.onExit, props.targetElement]);
+  }, [props.disabled, props.easing, props.endScroll, props.onChange, props.onEnter, props.onExit, props.onProgressChange, props.opacity, props.rootMargin, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.shouldAlwaysCompleteAnimation, props.shouldDisableScalingTranslations, props.speed, props.startScroll, props.targetElement, props.translateX, props.translateY]);
   return {
@@ -121,53 +209,20 @@ ref: ref,
 function Parallax(props) {
-  var Tag = props.tag || 'div';
+  var _getIsolatedParallaxP = getIsolatedParallaxProps(props),
+      parallaxProps = _getIsolatedParallaxP.parallaxProps,
+      rest = _getIsolatedParallaxP.rest;
 
-  var _useParallax = useParallax(props),
+  var _useParallax = useParallax(parallaxProps),
       ref = _useParallax.ref;
 
-  return React.createElement(Tag, {
-    className: props.className,
-    style: props.style,
+  return React.createElement("div", Object.assign({
     ref: ref
-  }, props.children);
+  }, rest), props.children);
 }
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
+var _excluded$1 = ["disabled", "style", "layers"],
+    _excluded2 = ["children", "disabled", "style", "expanded", "image"];
 var containerStyle = {
   position: 'relative',
   overflow: 'hidden',
-  width: '100%',
-  height: '50vh'
+  width: '100%'
 };
@@ -177,53 +232,54 @@ var absoluteStyle = {
   top: 0,
+  left: 0,
   right: 0,
-  bottom: 0,
-  left: 0
+  bottom: 0
 };
-var ParallaxBanner = function ParallaxBanner(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      layers = _ref.layers,
-      style = _ref.style,
-      disabled = _ref.disabled;
-  return React.createElement("div", {
-    style: _extends({}, containerStyle, style),
-    className: 'parallax-banner' + (className ? " " + className : '')
-  }, layers.map(function (_ref2, i) {
-    var speed = _ref2.speed,
-        layerChildren = _ref2.children,
-        _ref2$expanded = _ref2.expanded,
-        expanded = _ref2$expanded === void 0 ? true : _ref2$expanded,
-        image = _ref2.image,
-        _ref2$props = _ref2.props,
-        props = _ref2$props === void 0 ? {} : _ref2$props;
-    // save props to be merged
-    var layerStyle = props.style || {};
-    var layerClass = props.className || ''; // remove from pass through props
 
-    delete props.style;
-    delete props.className;
-    var layerClassMerged = "parallax-banner-layer-" + i + (layerClass ? " " + layerClass : ''); // if this is an expanded layer overwrite the top/bottom styles with negative margins
+function getExpandedStyle(expanded, layer) {
+  var speed = layer.speed || 0;
+  return expanded ? {
+    top: Math.abs(speed) * 10 * -1 + 'px',
+    bottom: Math.abs(speed) * 10 * -1 + 'px'
+  } : {};
+}
 
-    var expandedStyle = expanded ? {
-      top: Math.abs(speed) * 10 * -1 + 'px',
-      bottom: Math.abs(speed) * 10 * -1 + 'px'
-    } : {}; // optional image styles
+function getImageStyle(layer) {
+  return layer.image ? {
+    backgroundImage: "url(" + layer.image + ")",
+    backgroundPosition: 'center',
+    backgroundSize: 'cover'
+  } : {};
+}
 
-    var imageStyle = image ? {
-      backgroundImage: "url(" + image + ")",
-      backgroundPosition: 'center',
-      backgroundSize: 'cover'
-    } : {};
+var ParallaxBanner = function ParallaxBanner(props) {
+  var rootStyle = props.style,
+      _props$layers = props.layers,
+      layers = _props$layers === void 0 ? [] : _props$layers,
+      rootRest = _objectWithoutPropertiesLoose(props, _excluded$1);
+
+  return React.createElement("div", Object.assign({
+    style: _extends({}, containerStyle, rootStyle)
+  }, rootRest), layers.map(function (layer, i) {
+    var _getIsolatedParallaxP = getIsolatedParallaxProps(layer),
+        parallaxProps = _getIsolatedParallaxP.parallaxProps,
+        rest = _getIsolatedParallaxP.rest;
+
+    var style = rest.style,
+        _rest$expanded = rest.expanded,
+        expanded = _rest$expanded === void 0 ? true : _rest$expanded,
+        divProps = _objectWithoutPropertiesLoose(rest, _excluded2);
+
     var key = "layer-" + i;
-    return React.createElement(Parallax, {
+    var imageStyle = getImageStyle(layer);
+    var expandedStyle = getExpandedStyle(expanded, layer);
+    var parallax = useParallax(_extends({
+      shouldDisableScalingTranslations: true
+    }, parallaxProps));
+    return React.createElement("div", Object.assign({
+      "data-testid": key,
       key: key,
-      speed: speed,
-      style: absoluteStyle,
-      disabled: disabled
-    }, React.createElement("div", Object.assign({
-      "data-testid": key,
-      className: layerClassMerged,
-      style: _extends({}, imageStyle, absoluteStyle, expandedStyle, layerStyle)
-    }, props), layerChildren));
-  }), children);
+      ref: parallax.ref,
+      style: _extends({}, imageStyle, absoluteStyle, expandedStyle, style)
+    }, divProps), rest.children);
+  }), props.children);
 };
@@ -230,0 +286,0 @@

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.13",
   "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
@@ -55,2 +55,5 @@ "keywords": [
     "testURL": "http://localhost",
+    "setupFiles": [
+      "<rootDir>/src/setupTests.ts"
+    ],
     "setupFilesAfterEnv": [
@@ -57,0 +60,0 @@ "<rootDir>/jest-setup.ts"

src/components/ParallaxBanner/types.ts

@@ -1,11 +0,8 @@
-export interface BannerLayer {
+import { ParallaxElementConfig } from 'parallax-controller';
+import { HTMLAttributes } from 'react';
+
+export interface BannerLayer
+  extends ParallaxElementConfig,
+    Omit<HTMLAttributes<{}>, 'onChange'> {
   /**
-   * A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster.
-   */
-  speed: number;
-  /**
-   * Custom layer children provided as a React element, for example `<Video />`
-   */
-  children?: any;
-  /**
    * Indicate if the layer should be expanded with negative top/bottom margins so the edges will
@@ -19,25 +16,14 @@ * never be visible.
   image?: string;
-  /*
-   * Props to apply to the layer element.
-   */
-  props?: any;
 }
 
-export interface ParallaxBannerProps {
+export interface ParallaxBannerProps
+  extends React.ComponentPropsWithoutRef<'div'> {
   /**
-   * Optionally pass additional class names to be added to the outermost parallax banner element.
+   * An Array of banner layers.
    */
-  className?: string;
+  layers?: BannerLayer[];
   /**
-   * Determines if the internal parallax layers will have offsets applied.
+   * Determines if all internal layers will be disabled
    */
   disabled?: boolean;
-  /**
-   * A required Array of Objects with layer properties: `[{ amount: 0.1, image: 'foo.jpg' }]`.
-   */
-  layers: BannerLayer[];
-  /**
-   * Optionally pass a style object to be added to the outermost parallax banner element.
-   */
-  style?: any;
 }

src/helpers/getParallaxProps.ts

 import { ParallaxElementConfig } from 'parallax-controller';
 import { removeUndefinedObjectKeys } from '../utils/removeUndefinedObjectKeys';
+import { getIsolatedParallaxProps } from './getIsolatedParallaxProps';
 
@@ -7,27 +8,7 @@ export function getParallaxProps(
 ): ParallaxElementConfig {
+  const { parallaxProps } = getIsolatedParallaxProps(props);
+
   return removeUndefinedObjectKeys({
-    speed: props.speed,
-    translateX: props.translateX,
-    translateY: props.translateY,
-    disabled: props.disabled,
-    rotate: props.rotate,
-    rotateX: props.rotateX,
-    rotateY: props.rotateY,
-    rotateZ: props.rotateZ,
-    scale: props.scale,
-    scaleX: props.scaleX,
-    scaleY: props.scaleY,
-    scaleZ: props.scaleZ,
-    opacity: props.opacity,
-    easing: props.easing,
-    rootMargin: props.rootMargin,
-    shouldAlwaysCompleteAnimation: props.shouldAlwaysCompleteAnimation,
-    onProgressChange: props.onProgressChange,
-    onChange: props.onChange,
-    onEnter: props.onEnter,
-    onExit: props.onExit,
-    startScroll: props.startScroll,
-    endScroll: props.endScroll,
-    targetElement: props.targetElement,
+    ...parallaxProps,
   });
 }

src/hooks/useParallax.ts

 import { CreateElementOptions, Element } from 'parallax-controller';
 import { useEffect, useRef, useState } from 'react';
 import { useVerifyController } from '../components/Parallax/hooks';
+import { ParallaxProps } from '../components/Parallax/types';
 import { getParallaxProps } from '../helpers/getParallaxProps';
-import { ParallaxProps } from '../types';
 import { useParallaxController } from './useParallaxController';
@@ -51,4 +51,10 @@
     props.disabled,
-    props.translateX,
-    props.translateY,
+    props.easing,
+    props.endScroll,
+    props.onChange,
+    props.onEnter,
+    props.onExit,
+    props.onProgressChange,
+    props.opacity,
+    props.rootMargin,
     props.rotate,
@@ -62,11 +68,9 @@ props.rotateX,
     props.scaleZ,
+    props.shouldAlwaysCompleteAnimation,
+    props.shouldDisableScalingTranslations,
     props.speed,
-    props.opacity,
-    props.easing,
-    props.rootMargin,
-    props.onProgressChange,
-    props.onChange,
-    props.onEnter,
-    props.onExit,
+    props.startScroll,
     props.targetElement,
+    props.translateX,
+    props.translateY,
   ]);
@@ -73,0 +77,0 @@

No alert changes

Improved metrics

Total package byte prevSize

156120

increased by30.84%

Number of package files

60

increased by11.11%

Lines of code

2526

increased by45.76%

No dependency changes