react-scroll-parallax
Advanced tools
Comparing version 3.0.0-beta.3 to 3.0.0-beta.4
@@ -11,1 +11,2 @@ import { PropsWithChildren } from 'react'; | ||
} | ||
export declare const Component: () => JSX.Element; |
/// <reference types="react" /> | ||
import { Element } from 'parallax-controller'; | ||
import { ParallaxProps } from '../types'; | ||
export declare function useParallax(props: ParallaxProps): { | ||
ref: import("react").MutableRefObject<HTMLElement | undefined>; | ||
export declare function useParallax<T extends HTMLElement>(props: ParallaxProps): { | ||
ref: import("react").RefObject<T>; | ||
controller: import("parallax-controller").ParallaxController | null; | ||
element: Element | undefined; | ||
}; |
@@ -49,7 +49,7 @@ 'use strict'; | ||
var controller = useController(); | ||
var ref = React.useRef(); | ||
var ref = React.useRef(null); | ||
useVerifyController(controller); | ||
function _getElementOptions() { | ||
var useSpeedProp = typeof props.speed !== 'undefined'; | ||
var shouldUseSpeedProp = typeof props.speed !== 'undefined'; | ||
var isHorizontal = (controller == null ? void 0 : controller.scrollAxis) == 'horizontal'; | ||
@@ -60,7 +60,7 @@ var isVertical = (controller == null ? void 0 : controller.scrollAxis) == 'vertical'; | ||
if (useSpeedProp && isHorizontal) { | ||
if (shouldUseSpeedProp && isHorizontal) { | ||
translateX = [(props.speed || 0) * 10 + "px", (props.speed || 0) * -10 + "px"]; | ||
} | ||
if (useSpeedProp && isVertical) { | ||
if (shouldUseSpeedProp && isVertical) { | ||
translateY = [(props.speed || 0) * 10 + "px", (props.speed || 0) * -10 + "px"]; | ||
@@ -124,3 +124,5 @@ } | ||
return { | ||
ref: ref | ||
ref: ref, | ||
controller: controller, | ||
element: element | ||
}; | ||
@@ -127,0 +129,0 @@ } |
@@ -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();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; | ||
"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(){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,controller:n,element:i}}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 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||{},x=f.className||"";delete f.style,delete f.className;var m="parallax-banner-layer-"+t+(x?" "+x:""),y=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:d,style:d,disabled:o},n.createElement("div",Object.assign({className:m,style:i({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},d,y,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 |
@@ -43,7 +43,7 @@ import { ParallaxController, ScrollAxis } from 'parallax-controller'; | ||
var controller = useController(); | ||
var ref = useRef(); | ||
var ref = useRef(null); | ||
useVerifyController(controller); | ||
function _getElementOptions() { | ||
var useSpeedProp = typeof props.speed !== 'undefined'; | ||
var shouldUseSpeedProp = typeof props.speed !== 'undefined'; | ||
var isHorizontal = (controller == null ? void 0 : controller.scrollAxis) == 'horizontal'; | ||
@@ -54,7 +54,7 @@ var isVertical = (controller == null ? void 0 : controller.scrollAxis) == 'vertical'; | ||
if (useSpeedProp && isHorizontal) { | ||
if (shouldUseSpeedProp && isHorizontal) { | ||
translateX = [(props.speed || 0) * 10 + "px", (props.speed || 0) * -10 + "px"]; | ||
} | ||
if (useSpeedProp && isVertical) { | ||
if (shouldUseSpeedProp && isVertical) { | ||
translateY = [(props.speed || 0) * 10 + "px", (props.speed || 0) * -10 + "px"]; | ||
@@ -118,3 +118,5 @@ } | ||
return { | ||
ref: ref | ||
ref: ref, | ||
controller: controller, | ||
element: element | ||
}; | ||
@@ -121,0 +123,0 @@ } |
{ | ||
"name": "react-scroll-parallax", | ||
"version": "3.0.0-beta.3", | ||
"version": "3.0.0-beta.4", | ||
"description": "React components to create parallax scroll effects for banners, images or any other DOM elements.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -8,5 +8,5 @@ import { CreateElementOptions, Element } from 'parallax-controller'; | ||
export function useParallax(props: ParallaxProps) { | ||
export function useParallax<T extends HTMLElement>(props: ParallaxProps) { | ||
const controller = useController(); | ||
const ref = useRef<HTMLElement>(); | ||
const ref = useRef<T>(null); | ||
@@ -16,3 +16,3 @@ useVerifyController(controller); | ||
function _getElementOptions(): CreateElementOptions { | ||
const useSpeedProp = typeof props.speed !== 'undefined'; | ||
const shouldUseSpeedProp = typeof props.speed !== 'undefined'; | ||
const isHorizontal = controller?.scrollAxis == 'horizontal'; | ||
@@ -25,3 +25,3 @@ const isVertical = controller?.scrollAxis == 'vertical'; | ||
// TODO: move to parallax-controller | ||
if (useSpeedProp && isHorizontal) { | ||
if (shouldUseSpeedProp && isHorizontal) { | ||
translateX = [ | ||
@@ -33,3 +33,3 @@ `${(props.speed || 0) * 10}px`, | ||
if (useSpeedProp && isVertical) { | ||
if (shouldUseSpeedProp && isVertical) { | ||
translateY = [ | ||
@@ -122,3 +122,3 @@ `${(props.speed || 0) * 10}px`, | ||
return { ref }; | ||
return { ref, controller, element }; | ||
} |
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
126345
1701