https://github.com/parlx-js/react-parlx
🖱️ parlx.js implementation for React component
https://github.com/parlx-js/react-parlx
component effect movement parallax react scroll
Last synced: 22 days ago
JSON representation
🖱️ parlx.js implementation for React component
- Host: GitHub
- URL: https://github.com/parlx-js/react-parlx
- Owner: parlx-js
- License: mit
- Created: 2018-06-13T20:29:27.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2023-01-03T15:16:10.000Z (over 2 years ago)
- Last Synced: 2025-03-28T02:22:06.689Z (about 1 month ago)
- Topics: component, effect, movement, parallax, react, scroll
- Language: TypeScript
- Homepage: https://parlx-js.github.io/react-parlx/
- Size: 4.51 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# [react-parlx](https://github.com/parlx-js/react-parlx)
[](https://www.npmjs.com/package/react-parlx)
[](https://www.npmjs.com/package/react-parlx)
[](https://www.npmjs.com/package/react-parlx)
[](https://codecov.io/gh/parlx-js/react-parlx)
[](https://travis-ci.org/parlx-js/react-parlx)
[](https://bundlephobia.com/result?p=react-parlx)
## About
**[parlx.js](https://www.npmjs.com/package/parlx.js) implementation for React component**
### Demo
- [Live – check website](https://parlx-js.github.io/parlx.js/)
- [Playground – play with library in Storybook](https://parlx-js.github.io/react-parlx/)
### Alternatives
- [react-parallax](https://github.com/rrutsche/react-parallax) by [Richard Rutsche](https://github.com/rrutsche)
- [React Scroll Parallax](https://github.com/jscottsmith/react-scroll-parallax) by [J Scott Smith](https://github.com/jscottsmith)
## How to Install
First, install the library in your project by npm:
```sh
$ npm install react-parlx
```
Or Yarn:
```sh
$ yarn add react-parlx
```
## Getting Started
**• Import plugin in React application file:**
```js
import ReactParlx from 'react-parlx';
```
**• Later create parallax component and pass options:**
```js
```
You can add components with or without additional content:
_with:_
```js
{/* additional content */}
```
_without:_
```js
```
## Props
| Name | Type | Default | Description | Available options |
| ---------------- | -------------------- | ---------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| **settings** | object | `{}` | [Default parlx.js settings](https://github.com/parlx-js/parlx.js#settings) | [parlx.js settings](https://github.com/parlx-js/parlx.js#settings) |
| **callbacks** | object | `{}` | [Default parlx.js callbacks](https://github.com/parlx-js/parlx.js#callbacks) | [parlx.js callbacks](https://github.com/parlx-js/parl |
| **overlay** | boolean | `false` | Create overlay for parallax container element | `true` (enable) / `false` (disable) |
| **overlayProps** | HTMLDivElement props | `{}` | Params for overlay element | HTMLDivElement props |
| **className** | string | `parallax` | Parallax container class name | Name of parallax container |
## Event
`onParlxMove` event callback will output current position of the parallax element
## Examples
```js
import React from 'react';
import ReactParlx from 'react-parlx';
/* ------ First Example ------ */
export const FirstExample = () => {
return (
console.log(el),
}}
/>
);
};
/* ------ Second Example ------ */
export const SecondExample = () => {
const handleParlxMove = (e) => {
console.log(e.detail);
};
const style = {
padding: 10,
};
return (
Hello World!
);
};
```
## License
This project is licensed under the MIT License © 2018-present Jakub Biesiada