react-scroll-parallax - npm Package Compare versions

Comparing version 3.0.0-beta.2 to 3.0.0-beta.3

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;
@@ -4,0 +4,0 @@ export declare namespace Parallax {

dist/index.d.ts

@@ -6,3 +6,4 @@ import { EasingPreset, EffectNumber, EffectString } from 'parallax-controller';
 import { ParallaxContext } from './context/ParallaxContext';
-export { useController } from './hooks/useController';
-export { Parallax, ParallaxBanner, ParallaxProvider, ParallaxContext, EasingPreset, EffectNumber, EffectString, };
+import { useParallax } from './hooks/useParallax';
+import { useController } from './hooks/useController';
+export { useParallax, useController, Parallax, ParallaxBanner, ParallaxProvider, ParallaxContext, EasingPreset, EffectNumber, EffectString, };

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

@@ -11,2 +11,21 @@ 'use strict';
 
+function useVerifyController(controller) {
+  React.useEffect(function () {
+    var isServer = typeof window === 'undefined'; // Make sure the provided controller is an instance of the Parallax Controller
+
+    var isInstance = controller instanceof parallaxController.ParallaxController; // Throw if neither context or global is available
+
+    if (!isServer && !controller && !isInstance) {
+      throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.");
+    }
+  }, [controller]);
+}
+
+function removeUndefinedObjectKeys(obj) {
+  Object.keys(obj).forEach(function (key) {
+    return obj[key] === undefined ? delete obj[key] : {};
+  });
+  return obj;
+}
+
 var ParallaxContext = /*#__PURE__*/React__default.createContext(null);
@@ -29,24 +48,5 @@
 
-function removeUndefinedObjectKeys(obj) {
-  Object.keys(obj).forEach(function (key) {
-    return obj[key] === undefined ? delete obj[key] : {};
-  });
-  return obj;
-}
-
-function useVerifyController(controller) {
-  React.useEffect(function () {
-    var isServer = typeof window === 'undefined'; // Make sure the provided controller is an instance of the Parallax Controller
-
-    var isInstance = controller instanceof parallaxController.ParallaxController; // Throw if neither context or global is available
-
-    if (!isServer && !controller && !isInstance) {
-      throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.");
-    }
-  }, [controller]);
-}
-
-function Parallax(props) {
+function useParallax(props) {
   var controller = useController();
-  var refInner = React.useRef();
+  var ref = React.useRef();
   useVerifyController(controller);
@@ -59,3 +59,3 @@
     var translateX = props.translateX;
-    var translateY = props.translateY;
+    var translateY = props.translateY; // TODO: move to parallax-controller
 
@@ -72,3 +72,3 @@ if (useSpeedProp && isHorizontal) {
       // @ts-expect-error
-      el: refInner.current,
+      el: ref.current,
       props: removeUndefinedObjectKeys({
@@ -125,4 +125,14 @@ translateX: translateX,
   }, [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]);
+  return {
+    ref: ref
+  };
+}
+
+function Parallax(props) {
   var Outer = props.tag;
   var Inner = props.innerTag;
+
+  var _useParallax = useParallax(props),
+      ref = _useParallax.ref;
+
   return React__default.createElement(Outer, {
@@ -133,3 +143,3 @@ className: props.className,
     className: props.innerClassName,
-    ref: refInner,
+    ref: ref,
     style: props.innerStyle
@@ -308,2 +318,3 @@ }, props.children));
 exports.useController = useController;
+exports.useParallax = useParallax;
 //# sourceMappingURL=react-scroll-parallax.cjs.development.js.map

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 a=o(),l=r.useRef();function s(){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"]),{el:l.current,props:(t={translateX:n,translateY:o,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])}(a);var i=r.useState(),c=i[0],d=i[1];return r.useEffect((function(){var e=null==a?void 0:a.createElement(s());return d(e),function(){e&&(null==a||a.removeElementById(e.id))}}),[]),r.useEffect((function(){c&&(e.disabled?null==a||a.resetElementStyles(c):null==a||a.updateElementPropsById(c.id,s().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]),n.createElement(e.tag,{className:e.className,style:e.style},n.createElement(e.innerTag,{className:e.innerClassName,ref:l,style:e.innerStyle},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,innerTag:"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,r=e.className,a=e.layers,o=e.disabled;return n.createElement("div",{style:s({},c,e.style),className:"parallax-banner"+(r?" "+r:"")},a.map((function(e,t){var r=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(r)*-1+"px",bottom:10*Math.abs(r)*-1+"px"}:{};return n.createElement(l,{key:"layer-"+t,speed:r,innerStyle:d,style:d,disabled:o},n.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 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,i(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);p.defaultProps={scrollAxis:t.ScrollAxis.vertical},Object.defineProperty(exports,"EasingPreset",{enumerable:!0,get:function(){return t.EasingPreset}}),exports.Parallax=l,exports.ParallaxBanner=u,exports.ParallaxContext=a,exports.ParallaxProvider=p,exports.useController=o;
+"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();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}}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 d={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,r=e.className,a=e.layers,o=e.disabled;return n.createElement("div",{style:i({},d,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,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(r)*-1+"px",bottom:10*Math.abs(r)*-1+"px"}:{};return n.createElement(s,{key:"layer-"+t,speed:r,innerStyle:u,style:u,disabled:o},n.createElement("div",Object.assign({className:y,style:i({},d?{backgroundImage:"url("+d+")",backgroundPosition:"center",backgroundSize:"cover"}:{},u,h,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

 import { ParallaxController, ScrollAxis } from 'parallax-controller';
 export { EasingPreset } from 'parallax-controller';
-import React, { useContext, useEffect, useRef, useState, Component } from 'react';
+import React, { useEffect, useContext, useRef, useState, Component } from 'react';
 
+function useVerifyController(controller) {
+  useEffect(function () {
+    var isServer = typeof window === 'undefined'; // Make sure the provided controller is an instance of the Parallax Controller
+
+    var isInstance = controller instanceof ParallaxController; // Throw if neither context or global is available
+
+    if (!isServer && !controller && !isInstance) {
+      throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.");
+    }
+  }, [controller]);
+}
+
+function removeUndefinedObjectKeys(obj) {
+  Object.keys(obj).forEach(function (key) {
+    return obj[key] === undefined ? delete obj[key] : {};
+  });
+  return obj;
+}
+
 var ParallaxContext = /*#__PURE__*/React.createContext(null);
@@ -22,24 +41,5 @@
 
-function removeUndefinedObjectKeys(obj) {
-  Object.keys(obj).forEach(function (key) {
-    return obj[key] === undefined ? delete obj[key] : {};
-  });
-  return obj;
-}
-
-function useVerifyController(controller) {
-  useEffect(function () {
-    var isServer = typeof window === 'undefined'; // Make sure the provided controller is an instance of the Parallax Controller
-
-    var isInstance = controller instanceof ParallaxController; // Throw if neither context or global is available
-
-    if (!isServer && !controller && !isInstance) {
-      throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.");
-    }
-  }, [controller]);
-}
-
-function Parallax(props) {
+function useParallax(props) {
   var controller = useController();
-  var refInner = useRef();
+  var ref = useRef();
   useVerifyController(controller);
@@ -52,3 +52,3 @@
     var translateX = props.translateX;
-    var translateY = props.translateY;
+    var translateY = props.translateY; // TODO: move to parallax-controller
 
@@ -65,3 +65,3 @@ if (useSpeedProp && isHorizontal) {
       // @ts-expect-error
-      el: refInner.current,
+      el: ref.current,
       props: removeUndefinedObjectKeys({
@@ -118,4 +118,14 @@ translateX: translateX,
   }, [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]);
+  return {
+    ref: ref
+  };
+}
+
+function Parallax(props) {
   var Outer = props.tag;
   var Inner = props.innerTag;
+
+  var _useParallax = useParallax(props),
+      ref = _useParallax.ref;
+
   return React.createElement(Outer, {
@@ -126,3 +136,3 @@ className: props.className,
     className: props.innerClassName,
-    ref: refInner,
+    ref: ref,
     style: props.innerStyle
@@ -290,3 +300,3 @@ }, props.children));
 
-export { Parallax, ParallaxBanner, ParallaxContext, ParallaxProvider, useController };
+export { Parallax, ParallaxBanner, ParallaxContext, ParallaxProvider, useController, useParallax };
 //# sourceMappingURL=react-scroll-parallax.esm.js.map

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
@@ -5,0 +5,0 @@ "keywords": [

src/index.ts

@@ -7,4 +7,8 @@ import { EasingPreset, EffectNumber, EffectString } from 'parallax-controller';
 import { ParallaxContext } from './context/ParallaxContext';
-export { useController } from './hooks/useController';
+import { useParallax } from './hooks/useParallax';
+import { useController } from './hooks/useController';
+
 export {
+  useParallax,
+  useController,
   Parallax,
@@ -11,0 +15,0 @@ ParallaxBanner,

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

Total package byte prevSize

124815

increased by1.97%

Number of package files

50

increased by4.17%

Lines of code

1684

increased by1.94%

No dependency changes