react-scroll-parallax - npm Package Compare versions

Comparing version 3.0.0-beta.9 to 3.0.0-beta.10

dist/index.d.ts

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

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

@@ -60,3 +60,3 @@ 'use strict';
 
-function useController() {
+function useParallaxController() {
   var parallaxController = React.useContext(ParallaxContext);
@@ -77,3 +77,3 @@ var isServer = typeof window === 'undefined';
 function useParallax(props) {
-  var controller = useController();
+  var controller = useParallaxController();
   var ref = React.useRef(null);
@@ -299,4 +299,4 @@ useVerifyController(controller);
 exports.ParallaxProvider = ParallaxProvider;
-exports.useController = useController;
 exports.useParallax = useParallax;
+exports.useParallaxController = useParallaxController;
 //# 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;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,shouldAlwaysCompleteAnimation:e.shouldAlwaysCompleteAnimation,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||{},m=f.className||"";delete f.style,delete f.className;var v="parallax-banner-layer-"+t+(m?" "+m:""),y=s?{top:10*Math.abs(r)*-1+"px",bottom:10*Math.abs(r)*-1+"px"}:{},x="layer-"+t;return n.createElement(i,{key:x,speed:r,style:p,disabled:o},n.createElement("div",Object.assign({"data-testid":x,className:v,style:c({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},p,y,h)},f),a))})),t)},exports.ParallaxContext=o,exports.ParallaxProvider=f,exports.useController=l,exports.useParallax=s;
+"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,shouldAlwaysCompleteAnimation:e.shouldAlwaysCompleteAnimation,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||{},m=f.className||"";delete f.style,delete f.className;var v="parallax-banner-layer-"+t+(m?" "+m:""),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:v,style:c({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},p,x,h)},f),a))})),t)},exports.ParallaxContext=o,exports.ParallaxProvider=f,exports.useParallax=s,exports.useParallaxController=l;
 //# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map

dist/react-scroll-parallax.esm.js

@@ -54,3 +54,3 @@ import { ParallaxController, ScrollAxis } from 'parallax-controller';
 
-function useController() {
+function useParallaxController() {
   var parallaxController = useContext(ParallaxContext);
@@ -71,3 +71,3 @@ var isServer = typeof window === 'undefined';
 function useParallax(props) {
-  var controller = useController();
+  var controller = useParallaxController();
   var ref = useRef(null);
@@ -283,3 +283,3 @@ useVerifyController(controller);
 
-export { Parallax, ParallaxBanner, ParallaxContext, ParallaxProvider, useController, useParallax };
+export { Parallax, ParallaxBanner, ParallaxContext, ParallaxProvider, useParallax, useParallaxController };
 //# sourceMappingURL=react-scroll-parallax.esm.js.map

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.0-beta.10",
   "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
@@ -89,3 +89,3 @@ "keywords": [
   "dependencies": {
-    "parallax-controller": "^1.2.0"
+    "parallax-controller": "^1.2.1"
   },
@@ -92,0 +92,0 @@ "devDependencies": {

README.md

@@ -6,33 +6,18 @@ # React Scroll Parallax
 [![NPM Downloads](https://img.shields.io/npm/dm/react-scroll-parallax)](https://www.npmjs.com/package/react-scroll-parallax)
-[![Codecov](https://codecov.io/gh/jscottsmith/react-scroll-parallax/branch/master/graph/badge.svg)](https://codecov.io/gh/jscottsmith/react-scroll-parallax)
+[![Codecov](https://codecov.io/gh/jscottsmith/react-scroll-parallax/branch/v3/graph/badge.svg)](https://codecov.io/gh/jscottsmith/react-scroll-parallax)
 
 [![Test and Lint](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/main.yml/badge.svg)](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/main.yml)
 [![Storybook](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/surge.yml/badge.svg)](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/surge.yml)
-[![Coverage](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/coverage.yml/badge.svg)](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/coverage.yml)
+[![Storybook](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/coverage.yml/badge.svg)](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/coverage.yml)
 
-React hooks and components to create parallax scroll effects for banners, images or any other DOM elements. Utilizes [Parallax Controller](https://github.com/jscottsmith/parallax-controller) to add vertical or horizontal scrolling based effects to elements. [Optimized](https://parallax-controller.vercel.app/docs/performance) to _reduce_ jank on scroll and works with SSR and SSG rendered React apps.
+React hooks and components to create parallax scroll effects for banners, images or any other DOM elements. Utilizes [Parallax Controller](https://parallax-controller.v1.damnthat.tv) to add vertical or horizontal scrolling based effects to elements. [Optimized](https://parallax-controller.v1.damnthat.tv/docs/performance) to _reduce_ jank on scroll and works with SSR and SSG rendered React apps.
 
-If you're coming from [V2](https://github.com/jscottsmith/react-scroll-parallax/tree/v2.4.2), here's a [migration guide](https://github.com/jscottsmith/react-scroll-parallax/blob/master/docs/migration-guide.md).
+If you're coming from [V2](https://github.com/jscottsmith/react-scroll-parallax/tree/v2.4.2), here's a [migration guide](https://react-scroll-parallax.v3.damnthat.tv/docs/migration-guides/v2-migration-guide).
 
-## Examples
+## Install (v3 beta)
 
-#### V3 Storybook
-
-See the [Storybook](https://react-scroll-parallax-v3.surge.sh) for example usage of each component
-
-- [Storybook](https://react-scroll-parallax-v3.surge.sh) - [Source](/stories)
-
-#### Demos
-
-Some demo websites using Parallax components
-
-- [Demo 1](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/) - [Source](https://github.com/jscottsmith/react-scroll-parallax-examples)
-- [Demo 2](https://react-scroll-parallax.netlify.com/) - [Source](https://github.com/jscottsmith/react-parallax-site)
-
-## Install
-
 With npm
 
 ```
-npm install react-scroll-parallax
+npm install react-scroll-parallax@beta
 ```
@@ -43,94 +28,25 @@
 ```
-yarn add react-scroll-parallax
+yarn add react-scroll-parallax@beta
 ```
 
-## Documentation
+## Getting Started
 
-- [Example Usage](#usage)
-- [Optimizations to Reduce Jank](#optimizations-to-reduce-jank)
+- [Usage](https://react-scroll-parallax.v3.damnthat.tv/docs/usage/)
+- [How it works](https://react-scroll-parallax.v3.damnthat.tv/docs/examples/how-it-works)
 
-### Docs: Components
+### Demos
 
-- [`<Parallax>`](/docs/parallax-component.md)
-- [`<ParallaxBanner>`](/docs/parallax-banner-component.md)
-- [`<ParallaxProvider>`](/docs/parallax-provider-component.md)
+- [Storybook v3](https://react-scroll-parallax-v3.surge.sh/) - [Source Code](https://github.com/jscottsmith/react-scroll-parallax/tree/v3/stories)
+- [Demo 1](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/) - [Source Code (old 1.x version)](https://github.com/jscottsmith/react-scroll-parallax-examples)
+- [Demo 2](https://react-scroll-parallax.netlify.app/) - [Source Code (old 2.x version)](https://github.com/jscottsmith/react-parallax-site)
 
 ### Docs: Hooks
 
-- [`useParallax()`](/docs/use-parallax-hook.md)
-- [`useController()`](/#todo)
-- [`useParallaxImage`](/#todo)
+- [`useParallax()`](https://react-scroll-parallax.v3.damnthat.tv/docs/usage/hooks/use-parallax)
+- [`useParallaxController()`](https://react-scroll-parallax.v3.damnthat.tv/docs/usage/hooks/use-parallax-controller)
 
-## Usage
+### Docs: Components
 
-### First: Wrap with a ParallaxProvider
-
-The [`<ParallaxProvider>`](#parallaxprovider) must wrap the component tree that contains all `<Parallax>` components. This should be a top level component like `<App>`. For example:
-
-```jsx
-import { ParallaxProvider } from 'react-scroll-parallax';
-
-function App() {
-  render() {
-    return (
-      <ParallaxProvider>
-        <AppRoutes />
-      </ParallaxProvider>
-    );
-  }
-}
-```
-
-### Then: Create effects with useParallax()
-
-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.
-
-```jsx
-import { useParallax } from 'react-scroll-parallax';
-
-const Component = () => {
-  const { ref } = useParallax({ speed: 10 });
-  return <div ref={ref} className="my-thing" />;
-};
-```
-
-### Or: Create effects with \<Parallax>
-
-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).
-
-```jsx
-import { Parallax } from 'react-scroll-parallax';
-
-const Component = () => (
-  <Parallax translateY={[-20, 20]}>
-    <div className="my-thing" />
-  </Parallax>
-);
-```
-
-Example with transforms on the `translateX` axis starting at `-100px` and ending at `200px` (`translateX = ['-100px', '200px']`).
-
-```jsx
-import { Parallax } from 'react-scroll-parallax';
-
-const Component = () => (
-  <Parallax translateX={['-100px', '200px']}>
-    <div className="my-thing" />
-  </Parallax>
-);
-```
-
-## How it works
-
-TODO: **Explain how and when effects are applied** with some illustrations and demos.
-
-1. This lib was first designed to be used on elements that scroll naturally with the page. If you use `fixed` positioning you will likely want to set the `startScroll` and `endScroll` values manually, or use a `targetElement` to indicate scroll progress.
-2. Scroll state and positions of elements on the page are cached for performance reasons. This means that if the page height changes (most likely from [images loading](#example-usage-of-context)) after components mount the controller won't properly determine when the elements are in view. To correct this you can call the `parallaxController.update()` method from any child component of the `<ParallaxProvider />` via context. More details on how here: [Parallax Controller Context](#parallax-controller-context).
-
-## Troubleshooting
-
-If you're encountering issues like the parallax element jumping around or becoming stuck, there's a few likely culprits. Since this lib caches important positioning states it's possible for these to be outdated and incorrect. The most likely cause for this type of problem is the result of images loading and increasing the height of an element and/or the page. This can be fixed easily by [updating the cache](#example-usage-of-context).
-
-## Optimizations to Reduce Jank
-
-Considerations have been taken to reduce jank -- [please read more here](https://parallax-controller.vercel.app/docs/performance) on how this is done
+- [`<Parallax>`](https://react-scroll-parallax.v3.damnthat.tv/docs/usage/components/parallax-component)
+- [`<ParallaxBanner>`](https://react-scroll-parallax.v3.damnthat.tv/docs/usage/components/parallax-banner-component)
+- [`<ParallaxProvider>`](https://react-scroll-parallax.v3.damnthat.tv/docs/usage/components/parallax-provider)

src/hooks/useParallax.ts

@@ -6,6 +6,6 @@ import { CreateElementOptions, Element } from 'parallax-controller';
 import { ParallaxProps } from '../types';
-import { useController } from './useController';
+import { useParallaxController } from './useParallaxController';
 
 export function useParallax<T extends HTMLElement>(props: ParallaxProps) {
-  const controller = useController();
+  const controller = useParallaxController();
   const ref = useRef<T>(null);
@@ -12,0 +12,0 @@

src/index.ts

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

No alert changes

Improved metrics

Number of package files

54

increased by1.89%

Lines of code

1733

increased by2.91%

Worsened metrics

Total package byte prevSize

119053

decreased by-0.62%

Number of lines in readme file

51

decreased by-62.22%

Dependency changes

• Updatedparallax-controller@^1.2.1