react-scroll-parallax - npm Package Compare versions

Comparing version 3.0.0-beta.6 to 3.0.0-beta.7

dist/components/Parallax/index.d.ts

 import { PropsWithChildren } from 'react';
 import { ParallaxProps } from '../../types';
 export declare function Parallax(props: PropsWithChildren<ParallaxProps>): JSX.Element;
-export declare namespace Parallax {
-    var defaultProps: {
-        disabled: boolean;
-        tag: string;
-    };
-}

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;
-    defaultProps: {
-        disabled: boolean;
-    };
-};
+export declare const ParallaxBanner: ({ children, className, layers, style, disabled, }: PropsWithChildren<ParallaxBannerProps>) => JSX.Element;

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

@@ -30,2 +30,30 @@ 'use strict';
 
+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,
+    shouldStartAnimationInitialInView: props.shouldStartAnimationInitialInView,
+    onProgressChange: props.onProgressChange,
+    onChange: props.onChange,
+    onEnter: props.onEnter,
+    onExit: props.onExit,
+    startScroll: props.startScroll,
+    endScroll: props.endScroll,
+    targetElement: props.targetElement
+  });
+}
+
 var ParallaxContext = /*#__PURE__*/React__default.createContext(null);
@@ -53,34 +81,2 @@
 
-  function _getElementOptions() {
-    return {
-      // @ts-expect-error
-      el: ref.current,
-      props: 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,
-        shouldStartAnimationInitialInView: props.shouldStartAnimationInitialInView,
-        onProgressChange: props.onProgressChange,
-        onChange: props.onChange,
-        onEnter: props.onEnter,
-        onExit: props.onExit,
-        startScroll: props.startScroll,
-        endScroll: props.endScroll,
-        targetElement: props.targetElement
-      })
-    };
-  }
-
   var _useState = React.useState(),
@@ -92,4 +88,15 @@ element = _useState[0],
   React.useEffect(function () {
-    var newElement = controller == null ? void 0 : controller.createElement(_getElementOptions());
-    setElement(newElement);
+    var newElement;
+
+    if (ref.current instanceof HTMLElement) {
+      var options = {
+        el: ref.current,
+        props: getParallaxProps(props)
+      };
+      newElement = controller == null ? void 0 : controller.createElement(options);
+      setElement(newElement);
+    } else {
+      throw new Error('You must assign the ref returned by the useParallax() hook to an HTML Element.');
+    }
+
     return function () {
@@ -107,3 +114,4 @@ if (newElement) {
       } else {
-        controller == null ? void 0 : controller.updateElementPropsById(element.id, _getElementOptions().props);
+        var newProps = getParallaxProps(props);
+        controller == null ? void 0 : controller.updateElementPropsById(element.id, newProps);
       }
@@ -120,3 +128,3 @@ }
 function Parallax(props) {
-  var Tag = props.tag;
+  var Tag = props.tag || 'div';
 
@@ -132,6 +140,2 @@ var _useParallax = useParallax(props),
 }
-Parallax.defaultProps = {
-  disabled: false,
-  tag: 'div'
-};
 
@@ -220,4 +224,5 @@ function _extends() {
     } : {};
+    var key = "layer-" + i;
     return React__default.createElement(Parallax, {
-      key: "layer-" + i,
+      key: key,
       speed: speed,
@@ -227,2 +232,3 @@ style: absoluteStyle,
     }, React__default.createElement("div", Object.assign({
+      "data-testid": key,
       className: layerClassMerged,
@@ -233,5 +239,2 @@ style: _extends({}, imageStyle, absoluteStyle, expandedStyle, layerStyle)
 };
-ParallaxBanner.defaultProps = {
-  disabled: false
-};
 
@@ -238,0 +241,0 @@ var createController = function createController(options) {

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(){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;
+"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,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}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||{},v=f.className||"";delete f.style,delete f.className;var m="parallax-banner-layer-"+t+(v?" "+v:""),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:m,style:c({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},p,x,h)},f),a))})),t)},exports.ParallaxContext=o,exports.ParallaxProvider=f,exports.useController=l,exports.useParallax=s;
 //# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map

dist/react-scroll-parallax.esm.js

@@ -24,2 +24,30 @@ import { ParallaxController, ScrollAxis } from 'parallax-controller';
 
+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,
+    shouldStartAnimationInitialInView: props.shouldStartAnimationInitialInView,
+    onProgressChange: props.onProgressChange,
+    onChange: props.onChange,
+    onEnter: props.onEnter,
+    onExit: props.onExit,
+    startScroll: props.startScroll,
+    endScroll: props.endScroll,
+    targetElement: props.targetElement
+  });
+}
+
 var ParallaxContext = /*#__PURE__*/React.createContext(null);
@@ -47,34 +75,2 @@
 
-  function _getElementOptions() {
-    return {
-      // @ts-expect-error
-      el: ref.current,
-      props: 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,
-        shouldStartAnimationInitialInView: props.shouldStartAnimationInitialInView,
-        onProgressChange: props.onProgressChange,
-        onChange: props.onChange,
-        onEnter: props.onEnter,
-        onExit: props.onExit,
-        startScroll: props.startScroll,
-        endScroll: props.endScroll,
-        targetElement: props.targetElement
-      })
-    };
-  }
-
   var _useState = useState(),
@@ -86,4 +82,15 @@ element = _useState[0],
   useEffect(function () {
-    var newElement = controller == null ? void 0 : controller.createElement(_getElementOptions());
-    setElement(newElement);
+    var newElement;
+
+    if (ref.current instanceof HTMLElement) {
+      var options = {
+        el: ref.current,
+        props: getParallaxProps(props)
+      };
+      newElement = controller == null ? void 0 : controller.createElement(options);
+      setElement(newElement);
+    } else {
+      throw new Error('You must assign the ref returned by the useParallax() hook to an HTML Element.');
+    }
+
     return function () {
@@ -101,3 +108,4 @@ if (newElement) {
       } else {
-        controller == null ? void 0 : controller.updateElementPropsById(element.id, _getElementOptions().props);
+        var newProps = getParallaxProps(props);
+        controller == null ? void 0 : controller.updateElementPropsById(element.id, newProps);
       }
@@ -114,3 +122,3 @@ }
 function Parallax(props) {
-  var Tag = props.tag;
+  var Tag = props.tag || 'div';
 
@@ -126,6 +134,2 @@ var _useParallax = useParallax(props),
 }
-Parallax.defaultProps = {
-  disabled: false,
-  tag: 'div'
-};
 
@@ -214,4 +218,5 @@ function _extends() {
     } : {};
+    var key = "layer-" + i;
     return React.createElement(Parallax, {
-      key: "layer-" + i,
+      key: key,
       speed: speed,
@@ -221,2 +226,3 @@ style: absoluteStyle,
     }, React.createElement("div", Object.assign({
+      "data-testid": key,
       className: layerClassMerged,
@@ -227,5 +233,2 @@ style: _extends({}, imageStyle, absoluteStyle, expandedStyle, layerStyle)
 };
-ParallaxBanner.defaultProps = {
-  disabled: false
-};
 
@@ -232,0 +235,0 @@ var createController = function createController(options) {

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.7",
   "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
@@ -54,3 +54,6 @@ "keywords": [
     "collectCoverage": true,
-    "testURL": "http://localhost"
+    "testURL": "http://localhost",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest-setup.ts"
+    ]
   },
@@ -98,2 +101,3 @@ "peerDependencies": {
     "@storybook/react": "^6.4.9",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
@@ -110,2 +114,3 @@ "@types/jest": "^27.0.3",
     "react-dom": "^17.0.2",
+    "react-hooks-testing-library": "^0.6.0",
     "react-is": "^17.0.2",
@@ -112,0 +117,0 @@ "react-test-renderer": "^17.0.1",

README.md

@@ -41,11 +41,19 @@ # React Scroll Parallax
 - [Example Usage](#usage)
+- [Optimizations to Reduce Jank](#optimizations-to-reduce-jank)
+
+### Docs: Components
+
 - [`<Parallax>`](/docs/parallax-component.md)
 - [`<ParallaxBanner>`](/docs/parallax-banner-component.md)
 - [`<ParallaxProvider>`](/docs/parallax-provider-component.md)
-- [Optimizations to Reduce Jank](#optimizations-to-reduce-jank)
-  - [PSA](#psa)
 
+### Docs: Hooks
+
+- [`useParallax()`](/docs/use-parallax-hook.md)
+- [`useController()`](/#todo)
+- [`useParallaxImage`](/#todo)
+
 ## Usage
 
-### Wrap with a ParallaxProvider
+### First: Wrap with a ParallaxProvider
 
@@ -68,3 +76,3 @@ The [`<ParallaxProvider>`](#parallaxprovider) must wrap the component tree that contains all `<Parallax>` components. This should be a top level component like `<App>`. For example:
 
-### Create effects with useParallax()
+### Then: Create effects with useParallax()
 
@@ -82,3 +90,3 @@ Then import the `useParallax` hook and use it anywhere within the provider. Here's an example that uses the `speed` prop so simply speed up (or slowdown) the rate of scroll.
 
-### Create effects with \<Parallax>
+### Or: Create effects with \<Parallax>
 
@@ -85,0 +93,0 @@ You can also use the `Parallax` component. Here's an example that will transform the element on the `translateY` axis starting at `-20%` and ending at `20%` (`translateY = [-20, 20]` \*percent is assumed with no provided unit).

src/hooks/useParallax.ts

 import { CreateElementOptions, Element } from 'parallax-controller';
 import { useEffect, useRef, useState } from 'react';
 import { useVerifyController } from '../components/Parallax/hooks';
+import { getParallaxProps } from '../helpers/getParallaxProps';
 import { ParallaxProps } from '../types';
-import { removeUndefinedObjectKeys } from '../utils/removeUndefinedObjectKeys';
 import { useController } from './useController';
@@ -14,35 +14,2 @@
 
-  function _getElementOptions(): CreateElementOptions {
-    return {
-      // @ts-expect-error
-      el: ref.current,
-      props: 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,
-        shouldStartAnimationInitialInView:
-          props.shouldStartAnimationInitialInView,
-        onProgressChange: props.onProgressChange,
-        onChange: props.onChange,
-        onEnter: props.onEnter,
-        onExit: props.onExit,
-        startScroll: props.startScroll,
-        endScroll: props.endScroll,
-        targetElement: props.targetElement,
-      }),
-    };
-  }
-
   const [element, setElement] = useState<Element>();
@@ -52,6 +19,16 @@
   useEffect(() => {
-    const newElement = controller?.createElement(_getElementOptions());
+    let newElement: Element | undefined;
+    if (ref.current instanceof HTMLElement) {
+      const options: CreateElementOptions = {
+        el: ref.current,
+        props: getParallaxProps(props),
+      };
+      newElement = controller?.createElement(options);
+      setElement(newElement);
+    } else {
+      throw new Error(
+        'You must assign the ref returned by the useParallax() hook to an HTML Element.'
+      );
+    }
 
-    setElement(newElement);
-
     return () => {
@@ -70,6 +47,4 @@ if (newElement) {
       } else {
-        controller?.updateElementPropsById(
-          element.id,
-          _getElementOptions().props
-        );
+        const newProps = getParallaxProps(props);
+        controller?.updateElementPropsById(element.id, newProps);
       }
@@ -76,0 +51,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

119168

increased by3.47%

Number of package files

53

increased by6%

Lines of code

1684

increased by6.31%

Number of lines in readme file

128

increased by6.67%

Worsened metrics

Dev dependency count

31

increased by6.9%

No dependency changes