react-parlx

parlx.js implementation for React component

Demo

See plugin in action

How to Install

First, install the library in your project by npm:

$ npm install react-parlx

Or Yarn:

$ yarn add react-parlx

Getting Started

• Import plugin in React application file:

import ReactParlx from 'react-parlx';

• Later create parallax component and pass options:

<ReactParlx
  overlay={ /* true/false */ }
  settings={ /* settings */ }
  callbacks={ /* callbacks */ }
  className={ /* class name(s) */ }
  parlxMove={ /* event output destination */ }
  // other props for div tag e.g. style
/>

You can add components with or without additional content:

with:

<ReactParlx /* options */>
  // additional content
</ReactParlx>

without:

<ReactParlx /* options */ />

Props

Name	Type	Default	Description	Available options
overlay	boolean	false	Create overlay for parallax container element	true (enable) / false (disable)
settings	object	{}	Default parlx.js settings	parlx.js settings
callbacks	object	{}	Default parlx.js callbacks	parlx.js callbacks
className	string	parallax	Parallax container class name	Name of parallax container

Event

parlxMove event will output current position of the parallax element

License

This project is licensed under the MIT License © 2018-present Jakub Biesiada