Socket
Socket
Sign inDemoInstall

react-scroll-parallax

Package Overview
Dependencies
Maintainers
1
Versions
109
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scroll-parallax - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

__tests__/Parallax.test.js
__tests__/ParallaxController.test.js
__tests__/ParallaxProvider.test.js
__tests__/propValidation.test.js
__tests__/testForPassiveScroll.test.js
.travis.yml
yarn.lock

2

example/client.js

@@ -8,2 +8,2 @@ import 'babel-polyfill';

ReactDOM.render(<App />, root);
ReactDOM.hydrate(<App />, root);

6

lib/components/Parallax.js

@@ -19,4 +19,6 @@ 'use strict';

var _reactScrollParallax = require('react-scroll-parallax');
var _ParallaxController = require('../libs/ParallaxController');
var _ParallaxController2 = _interopRequireDefault(_ParallaxController);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -55,3 +57,3 @@

// Make sure the provided controller is an instance of the Parallax Controller
var isInstance = this.controller instanceof _reactScrollParallax.ParallaxController;
var isInstance = this.controller instanceof _ParallaxController2.default;

@@ -58,0 +60,0 @@ // Throw if neither context or global is available

6

lib/components/ParallaxProvider.js

@@ -17,4 +17,6 @@ 'use strict';

var _reactScrollParallax = require('react-scroll-parallax');
var _ParallaxController = require('../libs/ParallaxController');
var _ParallaxController2 = _interopRequireDefault(_ParallaxController);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -53,3 +55,3 @@

// Must not be the server so kick it off...
this.parallaxController = _reactScrollParallax.ParallaxController.init();
this.parallaxController = _ParallaxController2.default.init();
}

@@ -56,0 +58,0 @@ }

39

lib/utils/propValidation.js

@@ -6,20 +6,19 @@ '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.offsetMin = offsetMin;
exports.offsetMax = offsetMax;
function offsetMin(props, propName, componentName) {
componentName = componentName || 'ANONYMOUS';
function offsetMin(props, propName) {
var componentName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'ANONYMOUS';
if (!(typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'string' || !(typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'number') {
return new Error('[' + propName + '] in ' + componentName + ' must be a string with with "%"" or "px" units or number');
var value = props[propName];
var isValid = typeof value === 'string' || typeof value === 'number';
if (!isValid) {
return new Error('[' + propName + '] in ' + componentName + ' must be a string with with "%"" or "px" units or number.');
}
if (props[propName]) {
var _value = props[propName];
if (typeof _value === 'string') {
_value = parseInt(_value, 10);
if (typeof value === 'string') {
value = parseInt(value, 10);
}
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.');
}

@@ -29,17 +28,19 @@ return null;

function offsetMax(props, propName, componentName) {
componentName = componentName || 'ANONYMOUS';
function offsetMax(props, propName) {
var componentName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'ANONYMOUS';
if (!(typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'string' || !(typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'number') {
return new Error('[' + propName + '] in ' + componentName + ' must be a string with with "%"" or "px" units or number');
var value = props[propName];
var isValid = typeof value === 'string' || typeof value === 'number';
if (!isValid) {
return new Error('[' + propName + '] in ' + componentName + ' must be a string with with "%"" or "px" units or number.');
}
if (props[propName]) {
var _value2 = props[propName];
if (typeof _value2 === 'string') {
_value2 = parseInt(_value2, 10);
if (typeof value === 'string') {
value = parseInt(value, 10);
}
return _value2 >= 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;
}

21

package.json
{
"name": "react-scroll-parallax",
"version": "1.1.1",
"version": "1.1.2",
"description": "React component to create parallax scrolling effects",

@@ -11,6 +11,7 @@ "repository": {

"scripts": {
"dev": "jest && webpack --progress --colors --watch",
"dev": "yarn test && webpack --progress --colors --watch",
"dev-server": "node ./example/dist/server",
"gh-pages": "NODE_ENV=production webpack --progress --colors",
"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\"",

@@ -22,3 +23,5 @@ "prepublish": "babel ./src --out-dir ./lib --presets es2015,react,stage-0 --plugins babel-plugin-add-module-exports"

"<rootDir>/src/"
]
],
"coverageDirectory": "./coverage/",
"collectCoverage": true
},

@@ -34,6 +37,7 @@ "keywords": [

"dependencies": {
"prop-types": "^15.5.10",
"react": "^15.4.2",
"react-dom": "^15.4.2"
"prop-types": "^15.5.10"
},
"peerDependencies": {
"react": "^15.0.0-0 || ^16.0.0-0"
},
"devDependencies": {

@@ -49,8 +53,11 @@ "babel-cli": "^6.24.1",

"babel-preset-stage-0": "^6.24.1",
"codecov": "^3.0.0",
"cross-env": "^3.1.4",
"css-loader": "^0.28.0",
"express": "^4.14.1",
"jest": "^20.0.4",
"jest": "22.0.6",
"node-sass": "^4.5.0",
"postcss-loader": "^1.3.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"regenerator-runtime": "^0.10.5",

@@ -57,0 +64,0 @@ "sass-loader": "^6.0.3",

167

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)
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.
[View on NPM](https://www.npmjs.com/package/react-scroll-parallax)
## Examples
🔗 [CodePen Parallax](https://codepen.io/jscottsmith/pen/eREbwz)
Some links demonstrating possible effects created with this lib:
🔗 [Example Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/)
- [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)
🔗 [Parallax Testing](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-test/)
## Install
With npm
```

@@ -21,15 +24,20 @@ npm i react-scroll-parallax --save

or yarn
```
yarn add react-scroll-parallax
```
## Usage
Wrap your component tree that will contain `<Parallax />` components with the `<ParallaxProvider />`. 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:
```jsx
...
import { ParallaxProvider } from 'react-scroll-parallax';
class App extends Component {
class AppContainer extends Component {
render() {
return (
<ParallaxProvider>
<StuffWithParallax />
<App />
</ParallaxProvider>

@@ -42,85 +50,53 @@ );

Import the `Parallax` component...
Import the `Parallax` component and use it anywhere within the provider like so:
```javascript
```jsx
import { Parallax } from 'react-scroll-parallax';
```
... then use it like so:
```jsx
<Parallax
className="custom-class"
offsetYMax={20}
offsetYMin={-20}
slowerScrollRate
tag="figure"
>
<img src="/image" />
</Parallax>
const ParallaxImage = () => (
<Parallax
className="custom-class"
offsetYMax={20}
offsetYMin={-20}
slowerScrollRate
tag="figure"
>
<Image src="/image.jpg" />
</Parallax>
);
```
**NOTE:** Scroll state and positions of elements on the page are cached for performance reasons. This means that if the page height changes (perhaps from images loading) after `<Parallax />` components are mounted 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).
**NOTE:** 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 `<Parallax />` components are mounted 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).
## Parallax Component Props
## \<Parallax> Props
The following are all props that can be passed to the React `<Parallax />` component:
**`className`**
|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.
- type: `String`
## \<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:
Optionally pass additional class names to be added to the outer parallax element.
```jsx
const AppContainer = () => (
<ParallaxProvider>
<Router>
<App />
</Router>
</ParallaxProvider>
);
```
**`disabled`**
### Parallax Controller Context
- type: `Boolean`
- default: `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`**
- type: `Number` or `String`
- default: `0`
Maximum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width.
**`offsetXMin`**
- type: `Number` or `String`
- default: `0`
Minimum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width.
**`offsetYMax`**
- type: `Number` or `String`
- default: `0`
Maximum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height.
**`offsetYMin`**
- type: `Number` or `String`
- default: `0`
Minimum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height.
**`slowerScrollRate`**
- type: `Boolean`
- default `false`
Determines whether the scroll rate of the parallax component will move faster or slower than the default rate of scroll.
**`tag`**
- type: `String`
- default `div`
Optionally pass a tag name to be applied to the outer most parallax element. For example: `<Parallax tag="figure" />`.
## Parallax Controller Context
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:

@@ -130,3 +106,2 @@

class Foo extends Component {
static contextTypes = {

@@ -138,5 +113,4 @@ parallaxController: PropTypes.object.isRequired,

// do stuff with this.context.parallaxController
}
...
}
}
```

@@ -148,6 +122,3 @@

const Bar = (props, context) => (
// do stuff with context.parallaxController
...
);

@@ -158,3 +129,2 @@

};
```

@@ -174,2 +144,23 @@

### Example usage of context
The most common use case that would require access to the controller is dealing with images. Since the controller caches attributes for performance they will need to be updated with the correct values once the image loads. Here's an example of how you could do that with an `<Image />` component:
```jsx
class Image extends Component {
static contextTypes = {
parallaxController: PropTypes.object.isRequired,
};
handleLoad = () => {
// updates cached values after image dimensions have loaded
this.context.parallaxController.update();
};
render() {
return <img src={this.props.src} onLoad={this.handleLoad} />;
}
}
```
## Browser Support

@@ -176,0 +167,0 @@

2

src/components/Parallax.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { offsetMin, offsetMax } from '../utils/propValidation';
import { ParallaxController } from 'react-scroll-parallax';
import ParallaxController from '../libs/ParallaxController';

@@ -6,0 +6,0 @@ export default class Parallax extends Component {

2

src/components/ParallaxProvider.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ParallaxController } from 'react-scroll-parallax';
import ParallaxController from '../libs/ParallaxController';

@@ -5,0 +5,0 @@ export default class ParallaxProvider extends Component {

20

src/utils/propValidation.js

@@ -1,7 +0,8 @@

export function offsetMin(props, propName, componentName) {
componentName = componentName || 'ANONYMOUS';
export function offsetMin(props, propName, componentName = 'ANONYMOUS') {
let value = props[propName];
const isValid = typeof value === 'string' || typeof value === 'number';
if (!typeof value === 'string' || !typeof value === 'number') {
if (!isValid) {
return new Error(
`[${propName}] in ${componentName} must be a string with with "%"" or "px" units or number`
`[${propName}] in ${componentName} must be a string with with "%"" or "px" units or number.`
);

@@ -11,3 +12,2 @@ }

if (props[propName]) {
let value = props[propName];
if (typeof value === 'string') {

@@ -25,8 +25,9 @@ value = parseInt(value, 10);

export function offsetMax(props, propName, componentName) {
componentName = componentName || 'ANONYMOUS';
export function offsetMax(props, propName, componentName = 'ANONYMOUS') {
let value = props[propName];
const isValid = typeof value === 'string' || typeof value === 'number';
if (!typeof value === 'string' || !typeof value === 'number') {
if (!isValid) {
return new Error(
`[${propName}] in ${componentName} must be a string with with "%"" or "px" units or number`
`[${propName}] in ${componentName} must be a string with with "%"" or "px" units or number.`
);

@@ -36,3 +37,2 @@ }

if (props[propName]) {
let value = props[propName];
if (typeof value === 'string') {

@@ -39,0 +39,0 @@ value = parseInt(value, 10);

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc