React Lazy Parallax

Inspired by SpaceX's clean display for live launch telemetry.

Github Page

Prerequisites

You should be using NodeJS and ReactJS

Installation

React Lazy Parallax is available as an npm package.

npm install react-lazy-parallax [-S]

or

yarn add react-lazy-parallax

Usage

Using React Lazy Parallax is very straightforward. Once it is included in your project, you can use the components this way:

import React from 'react';
import Parallax from 'react-lazy-parallax';


const MyAwesomeReactComponent = () => (
  <Parallax image={'./images/image.jpg'} style={{minHeight: 600}} />
);

export default MyAwesomeReactComponent;

Customization

Key	Required	Type	Description
image	Y	String	This is the image for the parallax background.
style		Object	Style that is passed to container.
imageStyle		Object	Style that is passed to parallax image div.