react-scroll-parallax - npm Package Compare versions

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

dist/components/Parallax/types.d.ts

@@ -1,2 +0,2 @@
-import { ValidEasingPresets } from 'parallax-controller';
+import { RootMarginShape, ValidEasingPresets } from 'parallax-controller';
 export interface ParallaxProps {
@@ -141,2 +141,9 @@ /**
     /**
+     * Margin to be applied as the bounds around an element.
+     * This will affect when an element is determined to be considered in the viewport.
+     *
+     * Example: rootMargin={{ top: 100, right: 100, bottom: 100, left: 100 }}
+     */
+    rootMargin?: RootMarginShape;
+    /**
      * Optionally pass additional class names to be added to the outermost parallax element.
@@ -143,0 +150,0 @@ */

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

@@ -78,3 +78,4 @@ 'use strict';
         opacity: props.opacity,
-        easing: props.easing
+        easing: props.easing,
+        rootMargin: props.rootMargin
       })
@@ -105,3 +106,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.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]);
   var Outer = props.tagOuter;
@@ -108,0 +109,0 @@ var Inner = props.tagInner;

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"),l=r.createContext(null);function n(){var e=t.useContext(l);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 o(e){var l=n(),o=t.useRef(),s=t.useRef();function i(){var t,r=void 0!==e.speed,a=e.translateX,n=e.translateY;return r&&"horizontal"==l.scrollAxis&&(a=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),r&&"vertical"==l.scrollAxis&&(n=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),{elInner:o.current,elOuter:s.current,props:(t={disabled:e.disabled,translateX:a,translateY:n,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},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t)}}!function(e){t.useEffect((function(){if(!(e||e instanceof a.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(l);var c=t.useState(),u=c[0],p=c[1];return t.useEffect((function(){var e=l.createElement(i());return p(e),function(){return l.removeElementById(e.id)}}),[]),t.useEffect((function(){u&&(e.disabled?l.resetElementStyles(u):l.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]),r.createElement(e.tagOuter,{className:"parallax-outer"+(e.className?" "+e.className:""),ref:s,style:e.styleOuter},r.createElement(e.tagInner,{className:"parallax-inner",ref:o,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)}o.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},p=function(e){var t=e.children,a=e.className,l=e.layers,n=e.disabled;return r.createElement("div",{style:s({},c,e.style),className:"parallax-banner"+(a?" "+a:"")},l.map((function(e,t){var a=e.amount,l=e.children,i=e.expanded,c=void 0===i||i,p=e.image,d=e.props,f=void 0===d?{}:d,v=f.style||{},x=f.className||"";delete f.style,delete f.className;var y="parallax-banner-layer-"+t+(x?" "+x:""),m=c?{top:100*Math.abs(a)*-1+"%",bottom:100*Math.abs(a)*-1+"%"}:{};return r.createElement(o,{key:"layer-"+t,translateY:[-1*a*100+"%",100*a+"%"],styleInner:u,styleOuter:u,disabled:n},r.createElement("div",Object.assign({className:y,style:s({},p?{backgroundImage:"url("+p+")",backgroundPosition:"center",backgroundSize:"cover"}:{},u,m,v)},f),l))})),t)};p.defaultProps={disabled:!1};var d=function(e){var t,n;function o(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}n=e,(t=o).prototype=Object.create(n.prototype),t.prototype.constructor=t,i(t,n);var s=o.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(l.Provider,{value:this.controller},this.props.children)},o}(t.Component);d.defaultProps={scrollAxis:a.ScrollAxis.vertical},exports.Parallax=o,exports.ParallaxBanner=p,exports.ParallaxContext=l,exports.ParallaxProvider=d,exports.useController=n;
+"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"),o=r.createContext(null);function l(){var e=t.useContext(o);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 n(e){var o=l(),n=t.useRef(),s=t.useRef();function i(){var t,r=void 0!==e.speed,a=e.translateX,l=e.translateY;return r&&"horizontal"==o.scrollAxis&&(a=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),r&&"vertical"==o.scrollAxis&&(l=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),{elInner:n.current,elOuter:s.current,props:(t={disabled:e.disabled,translateX:a,translateY:l,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},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t)}}!function(e){t.useEffect((function(){if(!(e||e instanceof a.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(o);var c=t.useState(),u=c[0],p=c[1];return t.useEffect((function(){var e=o.createElement(i());return p(e),function(){return o.removeElementById(e.id)}}),[]),t.useEffect((function(){u&&(e.disabled?o.resetElementStyles(u):o.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]),r.createElement(e.tagOuter,{className:"parallax-outer"+(e.className?" "+e.className:""),ref:s,style:e.styleOuter},r.createElement(e.tagInner,{className:"parallax-inner",ref:n,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)}n.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},p=function(e){var t=e.children,a=e.className,o=e.layers,l=e.disabled;return r.createElement("div",{style:s({},c,e.style),className:"parallax-banner"+(a?" "+a:"")},o.map((function(e,t){var a=e.amount,o=e.children,i=e.expanded,c=void 0===i||i,p=e.image,d=e.props,f=void 0===d?{}:d,v=f.style||{},x=f.className||"";delete f.style,delete f.className;var y="parallax-banner-layer-"+t+(x?" "+x:""),m=c?{top:100*Math.abs(a)*-1+"%",bottom:100*Math.abs(a)*-1+"%"}:{};return r.createElement(n,{key:"layer-"+t,translateY:[-1*a*100+"%",100*a+"%"],styleInner:u,styleOuter:u,disabled:l},r.createElement("div",Object.assign({className:y,style:s({},p?{backgroundImage:"url("+p+")",backgroundPosition:"center",backgroundSize:"cover"}:{},u,m,v)},f),o))})),t)};p.defaultProps={disabled:!1};var d=function(e){var t,l;function n(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}l=e,(t=n).prototype=Object.create(l.prototype),t.prototype.constructor=t,i(t,l);var s=n.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(o.Provider,{value:this.controller},this.props.children)},n}(t.Component);d.defaultProps={scrollAxis:a.ScrollAxis.vertical},exports.Parallax=n,exports.ParallaxBanner=p,exports.ParallaxContext=o,exports.ParallaxProvider=d,exports.useController=l;
 //# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map

dist/react-scroll-parallax.esm.js

@@ -71,3 +71,4 @@ import React, { useContext, useEffect, useRef, useState, Component } from 'react';
         opacity: props.opacity,
-        easing: props.easing
+        easing: props.easing,
+        rootMargin: props.rootMargin
       })
@@ -98,3 +99,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.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]);
   var Outer = props.tagOuter;
@@ -101,0 +102,0 @@ var Inner = props.tagInner;

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-alpha.5",
   "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
@@ -77,3 +77,3 @@ "repository": {
   "dependencies": {
-    "parallax-controller": "0.1.17"
+    "parallax-controller": "0.1.21"
   },
@@ -80,0 +80,0 @@ "devDependencies": {

src/components/Parallax/types.ts

@@ -1,2 +0,2 @@
-import { ValidEasingPresets } from 'parallax-controller';
+import { RootMarginShape, ValidEasingPresets } from 'parallax-controller';
 
@@ -144,2 +144,9 @@ export interface ParallaxProps {
   /**
+   * Margin to be applied as the bounds around an element.
+   * This will affect when an element is determined to be considered in the viewport.
+   *
+   * Example: rootMargin={{ top: 100, right: 100, bottom: 100, left: 100 }}
+   */
+  rootMargin?: RootMarginShape;
+  /**
    * Optionally pass additional class names to be added to the outermost parallax element.
@@ -146,0 +153,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

125153

increased by0.96%

Lines of code

1856

increased by1.03%

Dependency changes

• + Addedparallax-controller@0.1.21(transitive)

• - Removedparallax-controller@0.1.17(transitive)

• Updatedparallax-controller@0.1.21