react-scroll-parallax
Advanced tools
Comparing version 3.0.0-alpha.7 to 3.0.0-alpha.8
import { ParallaxController } from 'parallax-controller'; | ||
export declare function useVerifyController(controller: ParallaxController): void; | ||
export declare function useVerifyController(controller: ParallaxController | unknown): void; |
import { ParallaxController } from 'parallax-controller'; | ||
export declare function useController(): ParallaxController; | ||
export declare function useController(): ParallaxController | null; |
@@ -15,3 +15,8 @@ 'use strict'; | ||
var parallaxController = React.useContext(ParallaxContext); | ||
var isServer = typeof window === 'undefined'; | ||
if (isServer) { | ||
return null; | ||
} | ||
if (!parallaxController) { | ||
@@ -51,4 +56,4 @@ throw new Error('Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>'); | ||
var useSpeedProp = typeof props.speed !== 'undefined'; | ||
var isHorizontal = controller.scrollAxis == 'horizontal'; | ||
var isVertical = controller.scrollAxis == 'vertical'; | ||
var isHorizontal = (controller == null ? void 0 : controller.scrollAxis) == 'horizontal'; | ||
var isVertical = (controller == null ? void 0 : controller.scrollAxis) == 'vertical'; | ||
var translateX = props.translateX; | ||
@@ -96,6 +101,8 @@ var translateY = props.translateY; | ||
React.useEffect(function () { | ||
var newElement = controller.createElement(_getElementOptions()); | ||
var newElement = controller == null ? void 0 : controller.createElement(_getElementOptions()); | ||
setElement(newElement); | ||
return function () { | ||
return controller.removeElementById(newElement.id); | ||
if (newElement) { | ||
controller == null ? void 0 : controller.removeElementById(newElement.id); | ||
} | ||
}; | ||
@@ -107,5 +114,5 @@ }, []); // update element | ||
if (props.disabled) { | ||
controller.resetElementStyles(element); | ||
controller == null ? void 0 : controller.resetElementStyles(element); | ||
} else { | ||
controller.updateElementPropsById(element.id, _getElementOptions().props); | ||
controller == null ? void 0 : controller.updateElementPropsById(element.id, _getElementOptions().props); | ||
} | ||
@@ -112,0 +119,0 @@ } |
@@ -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(!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"==n.scrollAxis&&(a=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),r&&"vertical"==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,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(),p=c[0],u=c[1];return t.useEffect((function(){var e=n.createElement(i());return u(e),function(){return n.removeElementById(e.id)}}),[]),t.useEffect((function(){p&&(e.disabled?n.resetElementStyles(p):n.updateElementPropsById(p.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"},p={position:"absolute",top:0,right:0,bottom:0,left:0},u=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,u=e.image,d=e.props,f=void 0===d?{}:d,x=f.style||{},v=f.className||"";delete f.style,delete f.className;var y="parallax-banner-layer-"+t+(v?" "+v:""),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:p,styleOuter:p,disabled:o},r.createElement("div",Object.assign({className:y,style:s({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},p,h,x)},f),n))})),t)};u.defaultProps={disabled:!1};var d=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);d.defaultProps={scrollAxis:a.ScrollAxis.vertical},exports.Parallax=l,exports.ParallaxBanner=u,exports.ParallaxContext=n,exports.ParallaxProvider=d,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,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,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],p=c[1];return t.useEffect((function(){var e=null==n?void 0:n.createElement(i());return p(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},p=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,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:""),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({},p?{backgroundImage:"url("+p+")",backgroundPosition:"center",backgroundSize:"cover"}:{},u,h,v)},f),n))})),t)};p.defaultProps={disabled:!1};var d=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);d.defaultProps={scrollAxis:a.ScrollAxis.vertical},exports.Parallax=l,exports.ParallaxBanner=p,exports.ParallaxContext=n,exports.ParallaxProvider=d,exports.useController=o; | ||
//# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map |
@@ -8,3 +8,8 @@ import React, { useContext, useEffect, useRef, useState, Component } from 'react'; | ||
var parallaxController = useContext(ParallaxContext); | ||
var isServer = typeof window === 'undefined'; | ||
if (isServer) { | ||
return null; | ||
} | ||
if (!parallaxController) { | ||
@@ -44,4 +49,4 @@ throw new Error('Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>'); | ||
var useSpeedProp = typeof props.speed !== 'undefined'; | ||
var isHorizontal = controller.scrollAxis == 'horizontal'; | ||
var isVertical = controller.scrollAxis == 'vertical'; | ||
var isHorizontal = (controller == null ? void 0 : controller.scrollAxis) == 'horizontal'; | ||
var isVertical = (controller == null ? void 0 : controller.scrollAxis) == 'vertical'; | ||
var translateX = props.translateX; | ||
@@ -89,6 +94,8 @@ var translateY = props.translateY; | ||
useEffect(function () { | ||
var newElement = controller.createElement(_getElementOptions()); | ||
var newElement = controller == null ? void 0 : controller.createElement(_getElementOptions()); | ||
setElement(newElement); | ||
return function () { | ||
return controller.removeElementById(newElement.id); | ||
if (newElement) { | ||
controller == null ? void 0 : controller.removeElementById(newElement.id); | ||
} | ||
}; | ||
@@ -100,5 +107,5 @@ }, []); // update element | ||
if (props.disabled) { | ||
controller.resetElementStyles(element); | ||
controller == null ? void 0 : controller.resetElementStyles(element); | ||
} else { | ||
controller.updateElementPropsById(element.id, _getElementOptions().props); | ||
controller == null ? void 0 : controller.updateElementPropsById(element.id, _getElementOptions().props); | ||
} | ||
@@ -105,0 +112,0 @@ } |
{ | ||
"name": "react-scroll-parallax", | ||
"version": "3.0.0-alpha.7", | ||
"version": "3.0.0-alpha.8", | ||
"description": "React components to create parallax scroll effects for banners, images or any other DOM elements.", | ||
@@ -5,0 +5,0 @@ "repository": { |
import { ParallaxController } from 'parallax-controller'; | ||
import { useEffect } from 'react'; | ||
export function useVerifyController(controller: ParallaxController) { | ||
export function useVerifyController(controller: ParallaxController | unknown) { | ||
useEffect(() => { | ||
@@ -6,0 +6,0 @@ const isServer = typeof window === 'undefined'; |
@@ -5,4 +5,8 @@ import { useContext } from 'react'; | ||
export function useController(): ParallaxController { | ||
export function useController(): ParallaxController | null { | ||
const parallaxController = useContext(ParallaxContext); | ||
const isServer = typeof window === 'undefined'; | ||
if (isServer) { | ||
return null; | ||
} | ||
@@ -9,0 +13,0 @@ if (!parallaxController) { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
129564
1913