React Rellax Wrapper 🎁

About

react-rellax-wrapper provides a react wrapper around the Rellax js library. This allows for a more idomatic React way of handling parallax with the Rellax library.

Rellax Library https://dixonandmoe.com/rellax/

Examples

Check out the Storybook

Or run your own

$ git clone https://github.com/scottjr632/react-rellax-wrapper.git && cd react-rellax-wrapper
$ npm install
$ npm run storybook

Installing

npm

$ npm install react-rellax-wrapper

yarn

$ yarn add react-rellax-wrapper

Getting started

Import RellaxWrapper and wrap the component that you want to add the parralex feature to with RellaxWrapper.

import RellaxWrapper from 'react-rellax-wrapper'
// or
import { RellaxWrapper } from 'react-rellax-wrapper'

const App = () => (
  <div>
    <RellaxWrapper speed={7}>
      <h1>I am really fast!</h1>
    </RellaxWrapper>
    <RellaxWrapper speed={-9} percentage={0.9}>
      <div>
        <p>I am really slow</p>
      </div>
    </RellaxWrapper>
  </div>
)

Props

All props are optional

If a prop is ommited it will default to the rellax's generic default. For example if speed is omited default speed is -2.
All traditional options for Rellax can also be used such as callback, center, and relativeToWrapper.

interface RellaxWrapperProps {
  style?: React.CSSProperties;
  className?: string;
  zIndex?: number;

  /**
   * Centered parallax elements in your viewport. 0.5 is centered.
   */
  percentage?: number;

  /**
   * Specify different speeds for xs devices
   */
  xs?: number;

  /**
   * Specify different speeds for mobile devices. Default breakpoint is 576.
   */
  mobile?: number;

  /**
   * Specify different speeds for tablets. Default breakpoint is 768.
   */
  tablet?: number;

  /**
   * Specify different speeds for desktop devices. Default breakpoint is 1201.
   */
  desktop?: number;

  /**
   * Will run on every animation event
   * @param positions Object with x and y positions of the rellax element
   */
  callback?(positions: { x: number; y: number }): void;

  /**
   * Enable the ability to center parallax elements in your viewport
   */
  center?: boolean;

  /**
   * Enable horizontal parallax. This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically
   */
  horizontal?: boolean;

  /**
   * Allow decimal pixel values
   */
  round?: boolean;

  /**
   * A negative value will make it move slower than regular scrolling, and a positive value will make it move faster
   */
  speed?: number;

  /**
   * Enable vertical parallax
   */
  vertical?: boolean;

  /**
   * By default, the position of parallax elements is determined via the scroll position of the body. Passing in the wrapper property will tell Rellax to watch that element instead
   */
  wrapper?: string | HTMLElement;

  /**
   * Do we want rellax element to be relative to the mentioned wrapper.
   */
  relativeToWrapper?: boolean;

  /**
   * Each breakpoint value represents the resolution for mobile, tablet, desktop respectively.
   */
  breakpoints?: [number, number, number];
}