react-scroll-parallax - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0

__tests__/clamp.test.js

@@ -7,10 +7,7 @@ import clamp from 'utils/clamp.js';
 test('Clamps a value within a range', () => {
-    expect(clamp(50, min, max))
-        .toBe(50);
+    expect(clamp(50, min, max)).toBe(50);
 
-    expect(clamp(110, min, max))
-        .toBe(max);
+    expect(clamp(110, min, max)).toBe(max);
 
-    expect(clamp(0, min, max))
-        .toBe(min);
+    expect(clamp(0, min, max)).toBe(min);
 });

__tests__/getParallaxOffsets.test.js

@@ -16,7 +16,19 @@ import getParallaxOffsets from 'utils/getParallaxOffsets.js';
         x: {
-            value: scaleBetween(percentMoved, offset.xMax.value, offset.xMin.value, 0, 100),
+            value: scaleBetween(
+                percentMoved,
+                offset.xMax.value,
+                offset.xMin.value,
+                0,
+                100
+            ),
             unit: offset.xMax.unit,
         },
         y: {
-            value: scaleBetween(percentMoved, offset.yMax.value, offset.yMin.value, 0, 100),
+            value: scaleBetween(
+                percentMoved,
+                offset.yMax.value,
+                offset.yMin.value,
+                0,
+                100
+            ),
             unit: offset.yMax.unit,
@@ -28,7 +40,19 @@ },
         x: {
-            value: scaleBetween(percentMoved, offset.xMin.value, offset.xMax.value, 0, 100),
+            value: scaleBetween(
+                percentMoved,
+                offset.xMin.value,
+                offset.xMax.value,
+                0,
+                100
+            ),
             unit: offset.xMax.unit,
         },
         y: {
-            value: scaleBetween(percentMoved, offset.yMin.value, offset.yMax.value, 0, 100),
+            value: scaleBetween(
+                percentMoved,
+                offset.yMin.value,
+                offset.yMax.value,
+                0,
+                100
+            ),
             unit: offset.yMax.unit,
@@ -35,0 +59,0 @@ },

__tests__/parseValueAndUnit.test.js

 import parseValueAndUnit from 'utils/parseValueAndUnit';
 
 test('Parse a string to get the value and unit in either pixels or percent', () => {
-    expect(parseValueAndUnit('5px'))
-        .toEqual({ unit: 'px', value: 5 });
-    expect(parseValueAndUnit('52%'))
-        .toEqual({ unit: '%', value: 52 });
-    expect(parseValueAndUnit(13.333))
-        .toEqual({ unit: '%', value: 13.333 });
-    expect(parseValueAndUnit('75.8%'))
-        .toEqual({ unit: '%', value: 75 });
-    expect(parseValueAndUnit('23.1px'))
-        .toEqual({ unit: 'px', value: 23 });
-    expect(() => parseValueAndUnit(false))
-        .toThrow();
+    expect(parseValueAndUnit('5px')).toEqual({ unit: 'px', value: 5 });
+    expect(parseValueAndUnit('52%')).toEqual({ unit: '%', value: 52 });
+    expect(parseValueAndUnit(13.333)).toEqual({ unit: '%', value: 13.333 });
+    expect(parseValueAndUnit('75.8%')).toEqual({ unit: '%', value: 75 });
+    expect(parseValueAndUnit('23.1px')).toEqual({ unit: 'px', value: 23 });
+    expect(() => parseValueAndUnit(false)).toThrow();
 });

__tests__/scaleBetween.test.js

@@ -10,10 +10,8 @@ import scaleBetween from 'utils/scaleBetween.js';
 test('Scales a value from a given range to a new range', () => {
-    expect(scaleBetween(0.4, newMin, newMax, oldMin, oldMax))
-        .toBe(40);
-    expect(scaleBetween(0.1, newMin, newMax, oldMin, oldMax))
-        .toBe(10);
-    expect(scaleBetween(0.3, newMin, newMax, oldMin, oldMax))
-        .toBe(30);
-    expect(scaleBetween(0.333, newMin, newMax, oldMin, oldMax))
-        .toBeCloseTo(33.3);
+    expect(scaleBetween(0.4, newMin, newMax, oldMin, oldMax)).toBe(40);
+    expect(scaleBetween(0.1, newMin, newMax, oldMin, oldMax)).toBe(10);
+    expect(scaleBetween(0.3, newMin, newMax, oldMin, oldMax)).toBe(30);
+    expect(scaleBetween(0.333, newMin, newMax, oldMin, oldMax)).toBeCloseTo(
+        33.3
+    );
 });

lib/components/Parallax.js

@@ -13,5 +13,5 @@ 'use strict';
 
-var _reactProptypes = require('react-proptypes');
+var _propTypes = require('prop-types');
 
-var _reactProptypes2 = _interopRequireDefault(_reactProptypes);
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
@@ -112,12 +112,6 @@ var _propValidation = require('../utils/propValidation');
                 Tag,
-                {
-                    className: rootClass,
-                    ref: this.mapRefOuter
-                },
+                { className: rootClass, ref: this.mapRefOuter },
                 _react2.default.createElement(
                     'div',
-                    {
-                        className: 'parallax-inner',
-                        ref: this.mapRefInner
-                    },
+                    { className: 'parallax-inner', ref: this.mapRefInner },
                     children
@@ -142,13 +136,13 @@ )
 Parallax.propTypes = {
-    children: _reactProptypes2.default.node,
-    className: _reactProptypes2.default.string,
-    disabled: _reactProptypes2.default.bool.isRequired,
-    offsetXMax: _reactProptypes2.default.oneOfType([_reactProptypes2.default.string, _reactProptypes2.default.number]),
-    offsetXMin: _reactProptypes2.default.oneOfType([_reactProptypes2.default.string, _reactProptypes2.default.number]),
+    children: _propTypes2.default.node,
+    className: _propTypes2.default.string,
+    disabled: _propTypes2.default.bool.isRequired,
+    offsetXMax: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+    offsetXMin: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     offsetYMax: _propValidation.offsetMax,
     offsetYMin: _propValidation.offsetMin,
-    slowerScrollRate: _reactProptypes2.default.bool.isRequired,
-    tag: _reactProptypes2.default.string.isRequired
+    slowerScrollRate: _propTypes2.default.bool.isRequired,
+    tag: _propTypes2.default.string.isRequired
 };
 exports.default = Parallax;
 module.exports = exports['default'];

lib/libs/ParallaxController.js

@@ -24,3 +24,2 @@ 'use strict';
 function ParallaxController() {
-
     // All parallax elements to be updated
@@ -295,3 +294,3 @@ var elements = [];
         var el = element.elInner;
-        el.style.cssText = 'will-change:transform;\n            position:relative;\n            transform:translate3d(' + offsets.x.value + offsets.x.unit + ', ' + offsets.y.value + offsets.y.unit + ', 0)';
+        el.style.cssText = 'position:relative;\n            transform:translate3d(' + offsets.x.value + offsets.x.unit + ', ' + offsets.y.value + offsets.y.unit + ', 0)';
     }
@@ -305,3 +304,3 @@
         var el = element.elInner;
-        el.style.cssText = 'will-change:none;\n            position:relative;\n            transform:translate3d(0, 0, 0)';
+        el.style.cssText = 'position:relative;\n            transform:translate3d(0, 0, 0)';
     }
@@ -308,0 +307,0 @@

lib/utils/parseValueAndUnit.js

@@ -29,3 +29,4 @@ 'use strict';
             value: value,
-            unit: '%' };
+            unit: '%' // defaults to percent if not unit is passed
+        };
     } else if (isString && value.slice(-1) === '%') {
@@ -32,0 +33,0 @@ // remove % then parse

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0",
   "description": "React component to create parallax scrolling effects",
@@ -12,5 +12,6 @@ "repository": {
     "dev": "jest && webpack --progress --colors --watch",
-    "dev-server": "node ./examples/parallax-example/dist/server",
+    "dev-server": "node ./example/dist/server",
     "gh-pages": "NODE_ENV=production webpack --progress --colors",
     "test": "jest",
+    "prettier": "prettier --tab-width 4 --single-quote --trailing-comma es5 --print-width 80 --write \"{src,examples,__tests__}/**/**/**/*.js\"",
     "prepublish": "babel ./src --out-dir ./lib --presets es2015,react,stage-0 --plugins babel-plugin-add-module-exports"
@@ -32,5 +33,5 @@ },
   "dependencies": {
+    "prop-types": "^15.5.10",
     "react": "^15.4.2",
-    "react-dom": "^15.4.2",
-    "react-proptypes": "^1.0.0"
+    "react-dom": "^15.4.2"
   },
@@ -50,11 +51,8 @@ "devDependencies": {
     "express": "^4.14.1",
-    "file-loader": "^0.11.1",
     "jest": "^20.0.4",
     "node-sass": "^4.5.0",
     "postcss-loader": "^1.3.3",
-    "raw-loader": "^0.5.1",
     "regenerator-runtime": "^0.10.5",
     "sass-loader": "^6.0.3",
     "style-loader": "^0.16.1",
-    "url-loader": "^0.5.8",
     "webpack": "^2.2.1",
@@ -61,0 +59,0 @@ "webpack-merge": "^4.1.0",

README.md

 # React Scroll Parallax
 
-Provides a React component and single global passive scroll listener to add **vertical** scrolling based offsets to elements based on their position in the viewport. Works with server-side rendering and universal React apps.
+Provides a React component and single global 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.
 
@@ -9,14 +9,12 @@ [View on NPM](https://www.npmjs.com/package/react-scroll-parallax)
 
-🔗 [Example](https://jscottsmith.github.io/react-scroll-parallax/examples/parallax-example/)
+🔗 [CodePen Parallax](https://codepen.io/jscottsmith/pen/eREbwz)
 
-🔗 [Parallax Testing](https://jscottsmith.github.io/react-scroll-parallax/examples/parallax-test/)
+🔗 [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/)
+
 ## Install
 
-⚠️ **Warning: This is a beta pre-release**
-
-[1.0.0 Release goals](https://github.com/jscottsmith/react-scroll-parallax/issues/3)
-
 ```
-npm i --save react-scroll-parallax@beta
+npm i react-scroll-parallax --save
 ```
@@ -54,2 +52,4 @@
 
+NOTE: `ParallaxController` caches the scroll state and positions of elements on the page for performance reasons. This means that if the page height changes (perhaps by images loading) after `<Parallax />` components are mounted it won't properly determine when the elements are in view. To correct this call the `update()` once every thing has loaded and ready.
+
 ## Parallax Component Props
@@ -118,2 +118,6 @@
 
+**`init()`**
+
+Initilize the `ParallaxController` on the client with the `init` static method.
+
 **`update()`**
@@ -127,2 +131,6 @@
 
+## Support
+
+React scroll parallax should support the last two versions of all major browsers and has been tested on desktop Chrome, Firefox, Safari and Edge, as well as the following: iOS 9, iOS 10, Android 4 and IE11. If you encounter any errors for browsers that should be supported please post an issue.
+
 ## Development
@@ -152,2 +160,2 @@
 
-It's 2017 and you probably shouldn't be building parallax sites—but if you do (like I did) and you use this package try and use it responsibly. Keeping images small and optimized, reducing the number of moving elements in view and on the page, and disabling scroll effects on mobile devices should help achieve silky smooth animations and minimize annoying visitors.
+It's 2017 and you probably shouldn't be building parallax sites—but if you do (like I did) and you use this package try and use it responsibly. Keeping images small and optimized, reducing the number of moving elements in view and on the page, and disabling scroll effects on mobile devices should help achieve silky smooth animations.

src/components/Parallax.js

 import React, { Component } from 'react';
-import PropTypes from 'react-proptypes';
+import PropTypes from 'prop-types';
 import { offsetMin, offsetMax } from '../utils/propValidation';
 
 export default class Parallax extends Component {
-
     static defaultProps = {
@@ -32,3 +31,5 @@ disabled: false,
         if (typeof ParallaxController === 'undefined') {
-            throw new Error('Must initialize the ParallaxController before adding React Parallax components.');
+            throw new Error(
+                'Must initialize the ParallaxController before adding React Parallax components.'
+            );
         }
@@ -84,7 +85,3 @@ // create a new parallax element and save the reference
     render() {
-        const {
-            children,
-            className,
-            tag: Tag,
-        } = this.props;
+        const { children, className, tag: Tag } = this.props;
 
@@ -94,10 +91,4 @@ const rootClass = 'parallax-outer' + (className ? ` ${className}` : '');
         return (
-            <Tag
-                className={rootClass}
-                ref={this.mapRefOuter}
-            >
-                <div
-                    className="parallax-inner"
-                    ref={this.mapRefInner}
-                >
+            <Tag className={rootClass} ref={this.mapRefOuter}>
+                <div className="parallax-inner" ref={this.mapRefInner}>
                     {children}
@@ -104,0 +95,0 @@ </div>

src/libs/ParallaxController.js

@@ -21,3 +21,2 @@ import {
 function ParallaxController() {
-
     // All parallax elements to be updated
@@ -45,3 +44,7 @@ const elements = [];
     function _addListeners() {
-        window.addEventListener('scroll', _handleScroll, supportsPassive ? { passive: true } : false);
+        window.addEventListener(
+            'scroll',
+            _handleScroll,
+            supportsPassive ? { passive: true } : false
+        );
         window.addEventListener('resize', _handleResize, false);
@@ -51,3 +54,7 @@ }
     function _removeListeners() {
-        window.removeEventListener('scroll', _handleScroll, supportsPassive ? { passive: true } : false);
+        window.removeEventListener(
+            'scroll',
+            _handleScroll,
+            supportsPassive ? { passive: true } : false
+        );
         window.removeEventListener('resize', _handleResize, false);
@@ -159,8 +166,3 @@ }
     function _cacheAttributes(element) {
-        const {
-            yMin,
-            yMax,
-            xMax,
-            xMin,
-        } = element.offsets;
+        const { yMin, yMax, xMax, xMin } = element.offsets;
 
@@ -217,4 +219,4 @@ const { slowerScrollRate } = element.props;
         } else {
-            top = rect.top + scrollY + (yMaxPx * -1);
-            bottom = rect.bottom + scrollY + (yMinPx * -1);
+            top = rect.top + scrollY + yMaxPx * -1;
+            bottom = rect.bottom + scrollY + yMinPx * -1;
         }
@@ -259,3 +261,5 @@
         if (xMin.unit !== xMax.unit || yMin.unit !== yMax.unit) {
-            throw new Error('Must provide matching units for the min and max offset values of each axis.');
+            throw new Error(
+                'Must provide matching units for the min and max offset values of each axis.'
+            );
         }
@@ -292,9 +296,11 @@
         // Get the parallax X and Y offsets
-        const offsets = getParallaxOffsets(element.offsets, percentMoved, slowerScrollRate);
+        const offsets = getParallaxOffsets(
+            element.offsets,
+            percentMoved,
+            slowerScrollRate
+        );
 
         // Apply styles
         const el = element.elInner;
-        el.style.cssText =
-           `will-change:transform;
-            position:relative;
+        el.style.cssText = `position:relative;
             transform:translate3d(${offsets.x.value}${offsets.x.unit}, ${offsets.y.value}${offsets.y.unit}, 0)`;
@@ -309,5 +315,3 @@ }
         const el = element.elInner;
-        el.style.cssText =
-           `will-change:none;
-            position:relative;
+        el.style.cssText = `position:relative;
             transform:translate3d(0, 0, 0)`;
@@ -314,0 +318,0 @@ }

src/utils/getParallaxOffsets.js

@@ -10,9 +10,8 @@ import { scaleBetween } from './index';
 
-export default function getParallaxOffsets(offsets, percentMoved, slowerScrollRate) {
-    const {
-        yMin,
-        yMax,
-        xMin,
-        xMax,
-    } = offsets;
+export default function getParallaxOffsets(
+    offsets,
+    percentMoved,
+    slowerScrollRate
+) {
+    const { yMin, yMax, xMin, xMax } = offsets;
 
@@ -19,0 +18,0 @@ const yUnit = yMax.unit;

src/utils/isElementInView.js

@@ -12,5 +12,5 @@ /**
 
-    const topInView     = top    >= 0 && top    <= windowHeight;
-    const bottomInView  = bottom >= 0 && bottom <= windowHeight;
-    const covering      = top    <= 0 && bottom >= windowHeight;
+    const topInView = top >= 0 && top <= windowHeight;
+    const bottomInView = bottom >= 0 && bottom <= windowHeight;
+    const covering = top <= 0 && bottom >= windowHeight;
 
@@ -17,0 +17,0 @@ const isInView = topInView || bottomInView || covering;

src/utils/parseValueAndUnit.js

@@ -14,3 +14,5 @@ /**
     if (isBool || isObject) {
-        throw new Error('Ivalid value provided. Must provide a value as a string with % or px units.');
+        throw new Error(
+            'Ivalid value provided. Must provide a value as a string with % or px units.'
+        );
     }
@@ -17,0 +19,0 @@

src/utils/propValidation.js

@@ -5,3 +5,5 @@ export function offsetMin(props, propName, componentName) {
     if (!typeof value === 'string' || !typeof value === 'number') {
-        return new Error(`[${propName}] in ${componentName} must be a string with with "%"" or "px" units or number`);
+        return new Error(
+            `[${propName}] in ${componentName} must be a string with with "%"" or "px" units or number`
+        );
     }
@@ -14,3 +16,7 @@
         }
-        return value <= 0 ? null : new Error(`[${propName}] in ${componentName} is greater than zero. [${propName}] must be less than or equal to zero.`);
+        return value <= 0
+            ? null
+            : new Error(
+                  `[${propName}] in ${componentName} is greater than zero. [${propName}] must be less than or equal to zero.`
+              );
     }
@@ -24,3 +30,5 @@ return null;
     if (!typeof value === 'string' || !typeof value === 'number') {
-        return new Error(`[${propName}] in ${componentName} must be a string with with "%"" or "px" units or number`);
+        return new Error(
+            `[${propName}] in ${componentName} must be a string with with "%"" or "px" units or number`
+        );
     }
@@ -33,5 +41,9 @@
         }
-        return value >= 0 ? null : new Error(`[${propName}] in ${componentName} is less than zero. [${propName}] must be greater than or equal to zero.`);
+        return value >= 0
+            ? null
+            : new Error(
+                  `[${propName}] in ${componentName} is less than zero. [${propName}] must be greater than or equal to zero.`
+              );
     }
     return null;
-}
+}

webpack.config.js

@@ -1,4 +0,2 @@
-// Change this root to point to the desired example when
-const EXAMPLE_ROOT = './examples/parallax-example/';
-
+const ROOT = './example/';
 const createBabelConfig = require('./babelrc');
@@ -14,3 +12,3 @@ const merge = require('webpack-merge');
             'react-scroll-parallax': path.resolve('./src'),
-            'components': path.resolve(EXAMPLE_ROOT + 'components'),
+            components: path.resolve(ROOT + 'components'),
         },
@@ -21,8 +19,6 @@ },
 const clientConfig = merge(baseConfig, {
-    entry: path.resolve(EXAMPLE_ROOT + 'client.js'),
+    entry: path.resolve(ROOT + 'client.js'),
 
     output: {
-        path: path.resolve(
-            EXAMPLE_ROOT + 'dist'
-        ),
+        path: path.resolve(ROOT + 'dist'),
         filename: 'bundle.js',
@@ -35,6 +31,3 @@ },
                 test: /\.js$/,
-                include: [
-                    path.resolve(EXAMPLE_ROOT),
-                    path.resolve('./src'),
-                ],
+                include: [path.resolve(ROOT), path.resolve('./src')],
                 loader: 'babel-loader',
@@ -44,13 +37,4 @@ query: createBabelConfig(),
             {
-                test: /\.(png|jpg|jpeg|gif|svg|cur)$/,
-                loader: 'url-loader',
-                include: [
-                    path.resolve(EXAMPLE_ROOT),
-                ],
-            },
-            {
                 test: /\.scss$/,
-                include: [
-                    path.resolve(EXAMPLE_ROOT),
-                ],
+                include: [path.resolve(ROOT)],
                 loaders: [
@@ -89,8 +73,6 @@ 'style-loader',
 
-    entry: path.resolve(EXAMPLE_ROOT + 'server.js'),
+    entry: path.resolve(ROOT + 'server.js'),
 
     output: {
-        path: path.resolve(
-            EXAMPLE_ROOT + 'dist'
-        ),
+        path: path.resolve(ROOT + 'dist'),
         filename: 'server.js',
@@ -103,6 +85,3 @@ },
                 test: /\.js$/,
-                include: [
-                    path.resolve(EXAMPLE_ROOT),
-                    path.resolve('./src'),
-                ],
+                include: [path.resolve(ROOT), path.resolve('./src')],
                 loader: 'babel-loader',
@@ -113,5 +92,3 @@ query: createBabelConfig({ server: true }),
                 test: /\.scss$/,
-                include: [
-                    path.resolve(EXAMPLE_ROOT),
-                ],
+                include: [path.resolve(ROOT)],
                 loaders: [
@@ -125,3 +102,4 @@ {
                     },
-                    'postcss-loader', {
+                    'postcss-loader',
+                    {
                         loader: 'sass-loader',
@@ -128,0 +106,0 @@ query: {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

21

decreased by-12.5%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

157

increased by5.37%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

78631

decreased by-71.22%

Number of package files

42

decreased by-52.27%

Lines of code

1648

decreased by-17.19%

Dependency changes

• + Addedprop-types@^15.5.10

• - Removedreact-proptypes@^1.0.0

• - Removedreact-proptypes@1.0.0(transitive)