react-scroll-parallax - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

__tests__/Parallax.test.js

@@ -171,3 +171,3 @@ import React, { Component } from 'react';
 
-    it('to update an element in the controller when receiving new props and disable an element if the disable prop is true', () => {
+    it('to update an element in the controller when receiving relevant new props', () => {
         const node = document.createElement('div');
@@ -177,19 +177,9 @@
         controller.updateElement = jest.fn();
-        controller.resetElementStyles = jest.fn();
 
         let instance;
-
         class StateChanger extends React.Component {
             state = { disabled: false };
-
-            componentDidMount() {
-                this.setState({ disabled: true });
-            }
-
             render() {
                 return (
-                    <Parallax
-                        disabled={this.state.disabled}
-                        ref={ref => (instance = ref)}
-                    />
+                    <Parallax {...this.state} ref={ref => (instance = ref)} />
                 );
@@ -199,5 +189,6 @@ }
 
+        let stateInstance;
         ReactDOM.render(
             <MockProvider controllerMock={controller}>
-                <StateChanger />
+                <StateChanger ref={ref => (stateInstance = ref)} />
             </MockProvider>,
@@ -207,15 +198,58 @@ node
 
+        const testProps = {
+            disabled: true,
+            offsetXMax: 100,
+            offsetXMin: -100,
+            offsetYMax: 100,
+            offsetYMin: -100,
+            slowerScrollRate: false,
+        };
+
+        // trigger an update
+        stateInstance.setState(testProps);
+
         expect(controller.updateElement).toBeCalledWith(instance.element, {
             props: {
-                disabled: instance.props.disabled,
-                offsetXMax: instance.props.offsetXMax,
-                offsetXMin: instance.props.offsetXMin,
-                offsetYMax: instance.props.offsetYMax,
-                offsetYMin: instance.props.offsetYMin,
-                slowerScrollRate: instance.props.slowerScrollRate,
+                ...testProps,
             },
         });
 
+        // should not be called again
+        stateInstance.setState({
+            ...testProps,
+            foo: false,
+            bar: true,
+        });
+
+        expect(controller.updateElement).toHaveBeenCalledTimes(1);
+    });
+
+    it('to reset styles on an elment if the disabled prop is true', () => {
+        const node = document.createElement('div');
+
+        const controller = ParallaxController.init();
+        controller.resetElementStyles = jest.fn();
+
+        let instance;
+        class StateChanger extends React.Component {
+            state = { disabled: false };
+            render() {
+                return (
+                    <Parallax {...this.state} ref={ref => (instance = ref)} />
+                );
+            }
+        }
+
+        let stateInstance;
+        ReactDOM.render(
+            <MockProvider controllerMock={controller}>
+                <StateChanger ref={ref => (stateInstance = ref)} />
+            </MockProvider>,
+            node
+        );
+
+        stateInstance.setState({ disabled: true });
+
         expect(controller.resetElementStyles).toBeCalledWith(instance.element);
     });
 });

__tests__/ParallaxController.test.js

@@ -6,2 +6,15 @@ import ParallaxController from 'libs/ParallaxController';
 
+const options = {
+    elInner: document.createElement('div'),
+    elOuter: document.createElement('div'),
+    props: {
+        disabled: false,
+        offsetXMax: 0,
+        offsetXMin: 0,
+        offsetYMax: 0,
+        offsetYMin: 0,
+        slowerScrollRate: false,
+    },
+};
+
 describe('Expect the ParallaxController', () => {
@@ -41,14 +54,2 @@ afterEach(() => {
         const controller = ParallaxController.init();
-        const options = {
-            elInner: document.createElement('div'),
-            elOuter: document.createElement('div'),
-            props: {
-                disabled: false,
-                offsetXMax: 0,
-                offsetXMin: 0,
-                offsetYMax: 0,
-                offsetYMin: 0,
-                slowerScrollRate: false,
-            },
-        };
         const element = controller.createElement(options);
@@ -91,8 +92,24 @@
 
-    it('to update the controller when creating an element', () => {
+    it('to add created elements into the controller', () => {
+        const controller = ParallaxController.init();
+        const element = controller.createElement(options);
+        const elements = controller.getElements();
+
+        expect(elements[0]).toEqual(element);
+    });
+
+    it('to remove elements from the controller', () => {
+        const controller = ParallaxController.init();
+        const element = controller.createElement(options);
+        expect(controller.getElements()[0]).toEqual(element);
+
+        controller.removeElement(element);
+        expect(controller.getElements()).toEqual([]);
+    });
+
+    it("to throw if matching units aren't provided", () => {
         window.removeEventListener = jest.fn();
         const controller = ParallaxController.init();
-        controller.update = jest.fn();
 
-        const options = {
+        const incorrectOffsets = {
             elInner: document.createElement('div'),
@@ -102,6 +119,6 @@ elOuter: document.createElement('div'),
                 disabled: false,
-                offsetXMax: 0,
-                offsetXMin: 0,
-                offsetYMax: 0,
-                offsetYMin: 0,
+                offsetXMax: '100px',
+                offsetXMin: '-10%',
+                offsetYMax: '50px',
+                offsetYMin: 100, // defaults to %
                 slowerScrollRate: false,
@@ -111,2 +128,14 @@ },
 
+        expect(() => controller.createElement(incorrectOffsets)).toThrowError(
+            'Must provide matching units for the min and max offset values of each axis.'
+        );
+
+        controller.destroy();
+    });
+
+    it('to update the controller when creating an element', () => {
+        window.removeEventListener = jest.fn();
+        const controller = ParallaxController.init();
+        controller.update = jest.fn();
+
         controller.createElement(options);
@@ -122,15 +151,2 @@ expect(controller.update).toBeCalled();
 
-        const options = {
-            elInner: document.createElement('div'),
-            elOuter: document.createElement('div'),
-            props: {
-                disabled: false,
-                offsetXMax: 0,
-                offsetXMin: 0,
-                offsetYMax: 0,
-                offsetYMin: 0,
-                slowerScrollRate: false,
-            },
-        };
-
         const element = controller.createElement(options);
@@ -149,15 +165,2 @@ controller.updateElement(element, {
 
-        const options = {
-            elInner: document.createElement('div'),
-            elOuter: document.createElement('div'),
-            props: {
-                disabled: false,
-                offsetXMax: 0,
-                offsetXMin: 0,
-                offsetYMax: 0,
-                offsetYMin: 0,
-                slowerScrollRate: false,
-            },
-        };
-
         controller.createElement(options);
@@ -164,0 +167,0 @@

.storybook/config.js

@@ -15,4 +15,11 @@ import { configure, addDecorator } from '@storybook/react';
 
+// reset the window on each story
+const withWindowReset = storyFn => {
+    window.scrollTo(0, 0);
+    return storyFn();
+};
+
+addDecorator(withKnobs);
+addDecorator(withWindowReset);
 addDecorator(CenterDecorator);
-addDecorator(withKnobs);
 
@@ -19,0 +26,0 @@ const req = require.context('../stories', true, /\.stories\.js$/);

lib/components/Parallax.js

@@ -86,4 +86,4 @@ 'use strict';
         value: function componentWillReceiveProps(nextProps) {
-            // updates the elements props when changed
-            if (this.props !== nextProps) {
+            // updates the elements props when relevant parallax props change
+            if (this.props.disabled !== nextProps.disabled || this.props.offsetXMax !== nextProps.offsetXMax || this.props.offsetXMin !== nextProps.offsetXMin || this.props.offsetYMax !== nextProps.offsetYMax || this.props.offsetYMin !== nextProps.offsetYMin || this.props.slowerScrollRate !== nextProps.slowerScrollRate) {
                 this.controller.updateElement(this.element, {
@@ -90,0 +90,0 @@ props: {

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.ParallaxController = exports.ParallaxProvider = exports.Parallax = undefined;
+exports.ParallaxController = exports.ParallaxBanner = exports.ParallaxProvider = exports.Parallax = undefined;
 
@@ -17,2 +17,6 @@ var _Parallax2 = require('./components/Parallax');
 
+var _ParallaxBanner2 = require('./components/ParallaxBanner');
+
+var _ParallaxBanner3 = _interopRequireDefault(_ParallaxBanner2);
+
 var _ParallaxController2 = require('./libs/ParallaxController');
@@ -26,2 +30,3 @@
 exports.ParallaxProvider = _ParallaxProvider3.default;
+exports.ParallaxBanner = _ParallaxBanner3.default;
 exports.ParallaxController = _ParallaxController3.default;

lib/libs/ParallaxController.js

@@ -316,2 +316,10 @@ 'use strict';
     /**
+     * Gets the parallax elements in the controller
+     * @return {array} parallax elements
+     */
+    this.getElements = function () {
+        return elements;
+    };
+
+    /**
      * Creates a new parallax element object with new id
@@ -318,0 +326,0 @@ * and options to store in the 'elements' array.

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "React component to create parallax scrolling effects",
@@ -5,0 +5,0 @@ "repository": {

README.md

 # React Scroll Parallax
 
-[![npm version](https://badge.fury.io/js/react-scroll-parallax.svg)](https://badge.fury.io/js/react-scroll-parallax) [![Build Status](https://travis-ci.org/jscottsmith/react-scroll-parallax.svg?branch=dev)](https://travis-ci.org/jscottsmith/react-scroll-parallax) [![codecov](https://codecov.io/gh/jscottsmith/react-scroll-parallax/branch/dev/graph/badge.svg)](https://codecov.io/gh/jscottsmith/react-scroll-parallax)
+[![npm version](https://badge.fury.io/js/react-scroll-parallax.svg)](https://badge.fury.io/js/react-scroll-parallax) [![Build Status](https://travis-ci.org/jscottsmith/react-scroll-parallax.svg?branch=master)](https://travis-ci.org/jscottsmith/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)
 
@@ -11,6 +11,7 @@ Provides a React component and single passive scroll listener to add **vertical** scrolling based offsets to elements based on their position in the viewport. Works with universal (server-side rendered) React apps.
 
-- [Example Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/)
-- [Parallax Testing](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-test/)
-- [CodePen Parallax](https://codepen.io/jscottsmith/pen/eREbwz)
-- [CodePen Parallax Banner](https://codepen.io/jscottsmith/pen/aVBvGj)
+* [Example Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/)
+* [Storybook](http://react-scroll-parallax-v1.surge.sh/)
+* [Parallax Testing](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-test/)
+* [CodePen Parallax](https://codepen.io/jscottsmith/pen/eREbwz)
+* [CodePen Parallax Banner](https://codepen.io/jscottsmith/pen/aVBvGj)
 
@@ -33,3 +34,3 @@ ## Install
 
-The [`<ParallaxProvider />`](#parallaxprovider) should wrap the component tree that contains all `<Parallax />` components. This should be a top level component like `<AppContainer />`. For example:
+The [`<ParallaxProvider>`](#parallaxprovider) should wrap the component tree that contains all `<Parallax>` components. This should be a top level component like `<AppContainer>`. For example:
 
@@ -48,3 +49,2 @@ ```jsx
 }
-
 ```
@@ -72,9 +72,13 @@
 
-## \<Parallax> Props
+## \<Parallax>
 
-The following are all props that can be passed to the React `<Parallax />` component:
+The main component for manipulating an element's position based on scroll position within the viewport.
 
+### Props
+
+The following are all props that can be passed to the `<Parallax>` component:
+
 | Name                 |         Type         | Default | Description                                                                                                                                                    |
 | -------------------- | :------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **className**        |       `String`       |         | Optionally pass additional class names to be added to the outer most parallax element.                                                                         |
+| **className**        |       `String`       |         | Optionally pass additional class names to be added to the outermost parallax element.                                                                          |
 | **disabled**         |      `Boolean`       | `false` | Determines if the component will have parallax offsets applied. If `true` parallax styles are completely removed from the element and it is no longer updated. |
@@ -86,8 +90,60 @@ | **offsetXMax**       | `Number` or `String` | `0`     | Maximum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width.                                          |
 | **slowerScrollRate** |      `Boolean`       | `false` | Internally swaps the min/max offset y values of the parallax component to give the appearance of moving faster or slower than the default rate of scroll.      |
-| **styleInner**       |       `Object`       |         | Optionally pass a style object to be added to the innermost parallax element                                                                                   |
-| **styleOuter**       |       `Object`       |         | Optionally pass a style object to be added to the outermost parallax element                                                                                   |
+| **styleInner**       |       `Object`       |         | Optionally pass a style object to be added to the innermost parallax element.                                                                                  |
+| **styleOuter**       |       `Object`       |         | Optionally pass a style object to be added to the outermost parallax element.                                                                                  |
 | **tag**              |       `String`       | `div`   | Optionally pass an element tag name to be applied to the outermost parallax element.                                                                           |
 
+## \<ParallaxBanner>
+
+Component that utilizes `<Parallax>` components to achieve a parallaxing banner effect.
+
+### Example Usage
+
+Use the `layers` prop to indicate all images, offset amounts and scroll rates. Optionally pass additional children to be rendered. Styles of the outermost banner element can also be changed. Here's an example:
+
+```jsx
+<ParallaxBanner
+    className="your-class"
+    layers={[
+        {
+            image: 'https://foo.com/foo.jpg',
+            amount: 0.1,
+            slowerScrollRate: false,
+        },
+        {
+            image: 'https://foo.com/bar.png',
+            amount: 0.2,
+            slowerScrollRate: false,
+        },
+    ]}
+    style={{
+        height: '500px',
+    }}
+>
+    <h1>Banner Children</h1>
+</ParallaxBanner>
+```
+
+### Props
+
+The following are all props that can be passed to the `<ParallaxBanner>` component:
+
+| Name          |   Type    | Default | Description                                                                                                                                                          |
+| ------------- | :-------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **className** | `String`  |         | Optionally pass additional class names to be added to the outermost parallax banner element.                                                                         |
+| **disabled**  | `Boolean` | `false` | Determines if the internal parallax layers will have offsets applied.                                                                                       |
+| **layers**    |  `Array`  |         | A required `Array` of `Objects` with layer properties: `[{ amount: 0.1, image: 'foo.jpg', slowerScrollRate: false }]`. [See layers prop below](#layers-prop) |
+| **style**     | `Object`  |         | Optionally pass a style object to be added to the outermost parallax banner element.                                                                                 |
+
+### Layers Prop
+
+The `layers` props takes an array of objects that will represent each image of the parallax banner. The following properties describe a layer:
+
+| Name                 |   Type   | Description                                                                                                                                          |
+| -------------------- | :------: | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **amount**           | `Number` | A value from `0 – 1` that represents the vertical offset to be applied to the current layer, `0.1` would equal a `10%` offset on the top and bottom. |
+| **image**            | `String` | Image source that will be applied as a CSS background image on the layer.                                                                            |
+| **slowerScrollRate** | `Number` | Indicates whether the layer should move faster or slower than the default rate of scroll.                                                            |
+
 ## \<ParallaxProvider>
-    
+
 The `<ParallaxProvider />` component is meant to wrap a top level component in your application and is necessary to provide access though React's context API to the parallax controller. This component should only be used once in you app, for instance in an `<AppContainer />` component that won't be mounted/unmounted during route changes. Like so:
@@ -101,3 +157,3 @@
         </Router>
-    </ParallaxProvider>    
+    </ParallaxProvider>
 );
@@ -108,3 +164,3 @@ ```
 
-Access the Parallax Controller via [React context](https://facebook.github.io/react/docs/context.html) in any components rendered within a `<ParallaxProvider />` by defining the `contextTypes` like so:
+Access the Parallax Controller via [React context](https://facebook.github.io/react/docs/context.html) in any components rendered within a `<ParallaxProvider>` by defining the `contextTypes` like so:
 
@@ -119,3 +175,3 @@ ```jsx
         // do stuff with this.context.parallaxController
-    }  
+    }
 }
@@ -122,0 +178,0 @@ ```

src/components/Parallax.js

@@ -70,4 +70,11 @@ import React, { Component } from 'react';
     componentWillReceiveProps(nextProps) {
-        // updates the elements props when changed
-        if (this.props !== nextProps) {
+        // updates the elements props when relevant parallax props change
+        if (
+            this.props.disabled !== nextProps.disabled ||
+            this.props.offsetXMax !== nextProps.offsetXMax ||
+            this.props.offsetXMin !== nextProps.offsetXMin ||
+            this.props.offsetYMax !== nextProps.offsetYMax ||
+            this.props.offsetYMin !== nextProps.offsetYMin ||
+            this.props.slowerScrollRate !== nextProps.slowerScrollRate
+        ) {
             this.controller.updateElement(this.element, {
@@ -74,0 +81,0 @@ props: {

src/index.js

 export Parallax from './components/Parallax';
 export ParallaxProvider from './components/ParallaxProvider';
+export ParallaxBanner from './components/ParallaxBanner';
 export ParallaxController from './libs/ParallaxController';

src/libs/ParallaxController.js

@@ -319,2 +319,10 @@ import {
     /**
+     * Gets the parallax elements in the controller
+     * @return {array} parallax elements
+     */
+    this.getElements = function() {
+        return elements;
+    };
+
+    /**
      * Creates a new parallax element object with new id
@@ -321,0 +329,0 @@ * and options to store in the 'elements' array.

stories/Parallax/Parallax.stories.js

@@ -55,3 +55,3 @@ import React from 'react';
     ))
-    .add('on a 100 elements', () => {
+    .add('with a 100 elements', () => {
         const amount = number('Number of Elements', 100);
@@ -58,0 +58,0 @@ const offset = number('Offset %', 50);

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

387949

increased by4.78%

Number of package files

58

increased by11.54%

Lines of code

2652

increased by16.26%

Number of lines in readme file

228

increased by32.56%

No dependency changes