react-parlx

About

parlx.js implementation for React component

Demo

• Live – check website
• Playground – play with library in Storybook

Alternatives

• react-parallax by Richard Rutsche
• React Scroll Parallax by J Scott Smith

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
  settings={/* settings */}
  callbacks={/* callbacks */}
  onParlxMove={/* event output destination */}
  overlay={/* true/false */}
  overlayProps={/* overlay props */}
  className={/* class name(s) */}
  // 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
settings	object	{}	Default parlx.js settings	parlx.js settings
callbacks	object	{}	Default 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

import React from 'react';
import ReactParlx from 'react-parlx';

/* ------ First Example ------ */

export const FirstExample = () => {
  return (
    <ReactParlx
      className="parallax"
      callbacks={{
        onResize: (el) => console.log(el),
      }}
    />
  );
};

/* ------ Second Example ------ */

export const SecondExample = () => {
  const handleParlxMove = (e) => {
    console.log(e.detail);
  };

  const style = {
    padding: 10,
  };

  return (
    <ReactParlx
      settings={{
        speed: 0.5,
        direction: 'diagonal',
      }}
      style={style}
      onParlxMove={handleParlxMove}
    >
      <h3>Hello World!</h3>
    </ReactParlx>
  );
};

License

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