react-scroll-parallax - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

__tests__/Parallax.test.js

 import React from 'react';
 import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
 import Parallax from 'components/Parallax';
@@ -15,4 +16,49 @@ import ParallaxProvider from 'components/ParallaxProvider';
 
+    it('to render correctly', () => {
+        // Workaround for refs
+        // See https://github.com/facebook/react/issues/7740
+        const div = document.createElement('div');
+        function createNodeMock() {
+            return {
+                getBoundingClientRect: () => div.getBoundingClientRect(),
+            };
+        }
+
+        const tree = renderer
+            .create(
+                <ParallaxProvider>
+                    <Parallax
+                        className="class-foo"
+                        disabled={false}
+                        offsetXMax={100}
+                        offsetXMin={-100}
+                        offsetYMax="75%"
+                        offsetYMin="-75%"
+                        slowerScrollRate={false}
+                        styleOuter={{
+                            border: 'solid red 2px',
+                        }}
+                        styleInner={{
+                            border: 'solid blue 2px',
+                        }}
+                        tag="figure"
+                    >
+                        <div className="foo" />
+                    </Parallax>
+                </ParallaxProvider>,
+                {
+                    createNodeMock,
+                }
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
     it('to throw if the ParallaxController is not available', () => {
         const node = document.createElement('div');
+        // NOTE: hide error and react warning
+        // see issue: https://github.com/facebook/jest/issues/4597
+        const preventError = e => e.preventDefault();
+        window.addEventListener('error', preventError, true);
+        Error.prototype.suppressReactErrorLogging = true;
 
@@ -31,2 +77,5 @@ const render = () => {
         );
+
+        window.removeEventListener('error', preventError, true);
+        Error.prototype.suppressReactErrorLogging = false;
     });
@@ -33,0 +82,0 @@

__tests__/ParallaxController.test.js

@@ -53,4 +53,2 @@ import ParallaxController from 'libs/ParallaxController';
         const element = instance.createElement(options);
-        const expectedElInner = document.createElement('div');
-        expectedElInner.style.position = 'relative';
 
@@ -69,3 +67,3 @@ const expectedElement = {
             },
-            elInner: expectedElInner,
+            elInner: document.createElement('div'),
             elOuter: document.createElement('div'),
@@ -72,0 +70,0 @@ id: 1,

__tests__/parseValueAndUnit.test.js

@@ -7,5 +7,10 @@ import parseValueAndUnit from 'utils/parseValueAndUnit';
     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('75.8%')).toEqual({ unit: '%', value: 75.8 });
+    expect(parseValueAndUnit('23.1px')).toEqual({ unit: 'px', value: 23.1 });
     expect(() => parseValueAndUnit(false)).toThrow();
+    expect(() => parseValueAndUnit(() => {})).toThrow();
+    expect(() => parseValueAndUnit({ foo: 'bar' })).toThrow();
+    expect(() => parseValueAndUnit('100%%')).toThrow();
+    expect(() => parseValueAndUnit('100px%')).toThrow();
+    expect(() => parseValueAndUnit('100vh')).toThrow();
 });

lib/components/Parallax.js

@@ -115,3 +115,5 @@ 'use strict';
                 className = _props.className,
-                Tag = _props.tag;
+                Tag = _props.tag,
+                styleOuter = _props.styleOuter,
+                styleInner = _props.styleInner;
 
@@ -123,6 +125,14 @@
                 Tag,
-                { className: rootClass, ref: this.mapRefOuter },
+                {
+                    className: rootClass,
+                    ref: this.mapRefOuter,
+                    style: styleOuter
+                },
                 _react2.default.createElement(
                     'div',
-                    { className: 'parallax-inner', ref: this.mapRefInner },
+                    {
+                        className: 'parallax-inner',
+                        ref: this.mapRefInner,
+                        style: styleInner
+                    },
                     children
@@ -164,2 +174,4 @@ )
     slowerScrollRate: _propTypes2.default.bool.isRequired,
+    styleOuter: _propTypes2.default.object,
+    styleInner: _propTypes2.default.object,
     tag: _propTypes2.default.string.isRequired
@@ -166,0 +178,0 @@ };

lib/libs/ParallaxController.js

@@ -295,3 +295,5 @@ 'use strict';
         var el = element.elInner;
-        el.style.cssText = 'position:relative;\n            transform:translate3d(' + offsets.x.value + offsets.x.unit + ', ' + offsets.y.value + offsets.y.unit + ', 0)';
+
+        // prettier-ignore
+        el.style.transform = 'translate3d(' + offsets.x.value + offsets.x.unit + ', ' + offsets.y.value + offsets.y.unit + ', 0)';
     }
@@ -305,3 +307,3 @@
         var el = element.elInner;
-        el.style.cssText = 'position:relative;\n            transform:translate3d(0, 0, 0)';
+        el.style.transform = '';
     }
@@ -406,3 +408,3 @@
 
-    // Keep global reference for legacy versions >= 1.0.0
+    // Keep global reference for legacy versions <= 1.1.0
 
@@ -409,0 +411,0 @@ if (hasWindow && !window.ParallaxController) {

lib/utils/parseValueAndUnit.js

@@ -6,5 +6,2 @@ 'use strict';
 });
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 exports.default = parseValueAndUnit;
@@ -14,38 +11,30 @@ /**
  *
- * @param {string} value
+ * @param {string} str
+ * @param {object} out
  * @return {object} The parsed value and the unit if any
  */
-function parseValueAndUnit(value) {
-    var isBool = typeof value === 'boolean';
-    var isObject = (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object';
-    var isString = typeof value === 'string';
-    var isNumb = typeof value === 'number';
+function parseValueAndUnit(str) {
+    var out = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { value: 0, unit: 'px' };
 
-    if (isBool || isObject) {
-        throw new Error('Ivalid value provided. Must provide a value as a string with % or px units.');
+    var isValid = typeof str === 'number' || typeof str === 'string';
+
+    if (!isValid) {
+        throw new Error('Invalid value provided. Must provide a value as a string or number');
     }
 
-    if (isNumb) {
-        return {
-            value: value,
-            unit: '%' // defaults to percent if not unit is passed
-        };
-    } else if (isString && value.slice(-1) === '%') {
-        // remove % then parse
-        value = parseInt(value.slice(0, -1), 10);
+    str = String(str);
+    out.value = parseFloat(str, 10);
+    out.unit = str.match(/[\d.\-\+]*\s*(.*)/)[1] || '%'; // default to percent
 
-        return {
-            value: value,
-            unit: '%'
-        };
-    } else if (isString && value.slice(-2) === 'px') {
-        // remove px then parse
-        value = parseInt(value.slice(0, -2), 10);
+    var validUnits = ['px', '%'];
+    var isValidUnit = validUnits.find(function (unit) {
+        return unit === out.unit;
+    });
 
-        return {
-            value: value,
-            unit: 'px'
-        };
+    if (!isValidUnit) {
+        throw new Error('Invalid unit provided. Must provide a unit of px in or %');
     }
+
+    return out;
 }
 module.exports = exports['default'];

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "React component to create parallax scrolling effects",
@@ -11,9 +11,11 @@ "repository": {
   "scripts": {
-    "dev": "yarn test && webpack --progress --colors --watch",
-    "dev-server": "node ./example/dist/server",
-    "gh-pages": "NODE_ENV=production webpack --progress --colors",
+    "start": "yarn storybook",
     "test": "BABEL_ENV=test jest",
     "test:watch": "BABEL_ENV=test jest --watch",
     "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"
+    "prepublish": "babel ./src --out-dir ./lib --presets es2015,react,stage-0 --plugins babel-plugin-add-module-exports",
+    "storybook": "start-storybook -p 3000",
+    "storybook:build": "build-storybook",
+    "storybook:export": "build-storybook -c .storybook -o build",
+    "deploy": "yarn run storybook:export"
   },
@@ -31,2 +33,3 @@ "jest": {
     "scroll",
+    "animation",
     "component"
@@ -43,2 +46,7 @@ ],
   "devDependencies": {
+    "@storybook/addon-actions": "^3.3.9",
+    "@storybook/addon-knobs": "^3.3.9",
+    "@storybook/addon-links": "^3.3.9",
+    "@storybook/addons": "^3.3.9",
+    "@storybook/react": "^3.3.9",
     "babel-cli": "^6.24.1",
@@ -62,9 +70,8 @@ "babel-core": "^6.23.1",
     "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "regenerator-runtime": "^0.10.5",
     "sass-loader": "^6.0.3",
     "style-loader": "^0.16.1",
-    "webpack": "^2.2.1",
-    "webpack-merge": "^4.1.0",
-    "webpack-node-externals": "^1.5.4"
+    "webpack": "^2.2.1"
   }
 }

README.md

@@ -73,12 +73,14 @@ # React Scroll Parallax
 
-|Name                  |Type                  |Default   |Description
-|----------------------|:--------------------:|:---------|----------------------------------------
-|**className**         |`String`              |          |Optionally pass additional class names to be added to the outer most 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.
-|**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.
-|**offsetXMin**        |`Number` or `String`  |`0`       |Minimum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width.
-|**offsetYMax**        |`Number` or `String`  |`0`       |Maximum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height.
-|**offsetYMin**        |`Number` or `String`  |`0`       |Minimum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height.
-|**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.
-|**tag**               |`String`              |`div`     |Optionally pass an element tag name to be applied to the outer most parallax element.
+| Name                 |         Type         | Default | Description                                                                                                                                                    |
+| -------------------- | :------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **className**        |       `String`       |         | Optionally pass additional class names to be added to the outer most 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. |
+| **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.                                          |
+| **offsetXMin**       | `Number` or `String` | `0`     | Minimum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width.                                          |
+| **offsetYMax**       | `Number` or `String` | `0`     | Maximum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height.                                         |
+| **offsetYMin**       | `Number` or `String` | `0`     | Minimum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height.                                         |
+| **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                                                                                   |
+| **tag**              |       `String`       | `div`   | Optionally pass an element tag name to be applied to the outermost parallax element.                                                                           |
 
@@ -85,0 +87,0 @@ ## \<ParallaxProvider>

src/components/Parallax.js

@@ -26,2 +26,4 @@ import React, { Component } from 'react';
         slowerScrollRate: PropTypes.bool.isRequired,
+        styleOuter: PropTypes.object,
+        styleInner: PropTypes.object,
         tag: PropTypes.string.isRequired,
@@ -107,3 +109,9 @@ };
     render() {
-        const { children, className, tag: Tag } = this.props;
+        const {
+            children,
+            className,
+            tag: Tag,
+            styleOuter,
+            styleInner,
+        } = this.props;
 
@@ -113,4 +121,12 @@ 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}
+                style={styleOuter}
+            >
+                <div
+                    className="parallax-inner"
+                    ref={this.mapRefInner}
+                    style={styleInner}
+                >
                     {children}
@@ -117,0 +133,0 @@ </div>

src/libs/ParallaxController.js

@@ -298,4 +298,5 @@ import {
         const el = element.elInner;
-        el.style.cssText = `position:relative;
-            transform:translate3d(${offsets.x.value}${offsets.x.unit}, ${offsets.y.value}${offsets.y.unit}, 0)`;
+
+        // prettier-ignore
+        el.style.transform = `translate3d(${offsets.x.value}${offsets.x.unit}, ${offsets.y.value}${offsets.y.unit}, 0)`;
     }
@@ -309,4 +310,3 @@
         const el = element.elInner;
-        el.style.cssText = `position:relative;
-            transform:translate3d(0, 0, 0)`;
+        el.style.transform = '';
     }
@@ -412,3 +412,3 @@
 
-    // Keep global reference for legacy versions >= 1.0.0
+    // Keep global reference for legacy versions <= 1.1.0
 
@@ -415,0 +415,0 @@ if (hasWindow && !window.ParallaxController) {

src/utils/parseValueAndUnit.js

 /**
  * Determines the unit of a string and parses the value
  *
- * @param {string} value
+ * @param {string} str
+ * @param {object} out
  * @return {object} The parsed value and the unit if any
  */
-export default function parseValueAndUnit(value) {
-    const isBool = typeof value === 'boolean';
-    const isObject = typeof value === 'object';
-    const isString = typeof value === 'string';
-    const isNumb = typeof value === 'number';
+export default function parseValueAndUnit(str, out = { value: 0, unit: 'px' }) {
+    const isValid = typeof str === 'number' || typeof str === 'string';
 
-    if (isBool || isObject) {
+    if (!isValid) {
         throw new Error(
-            'Ivalid value provided. Must provide a value as a string with % or px units.'
+            'Invalid value provided. Must provide a value as a string or number'
         );
     }
 
-    if (isNumb) {
-        return {
-            value,
-            unit: '%', // defaults to percent if not unit is passed
-        };
-    } else if (isString && value.slice(-1) === '%') {
-        // remove % then parse
-        value = parseInt(value.slice(0, -1), 10);
+    str = String(str);
+    out.value = parseFloat(str, 10);
+    out.unit = str.match(/[\d.\-\+]*\s*(.*)/)[1] || '%'; // default to percent
 
-        return {
-            value,
-            unit: '%',
-        };
-    } else if (isString && value.slice(-2) === 'px') {
-        // remove px then parse
-        value = parseInt(value.slice(0, -2), 10);
+    const validUnits = ['px', '%'];
+    const isValidUnit = validUnits.find(unit => unit === out.unit);
 
-        return {
-            value,
-            unit: 'px',
-        };
+    if (!isValidUnit) {
+        throw new Error(
+            'Invalid unit provided. Must provide a unit of px in or %'
+        );
     }
+
+    return out;
 }

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

371137

increased by21.92%

Number of package files

53

increased by3.92%

Number of lines in readme file

172

increased by1.18%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

28

increased by16.67%

Lines of code

2306

decreased by-0.73%

No dependency changes