lazy-loading

A cool multi-layer image component for React

Sep 08, 2020
A cool multi-layer image component for React

react-layered-image

react-layered-image is an interactive, multi-layer image component for React, inspired by the Apple TV layered images.

View Demo View Github

Features

  • Runs at 60fps on Chrome 54+, Firefox 49+, Safari 6.1+
  • Preserves aspect ratio through resizing
  • Loads images asynchronously

Installation

npm install react-layered-image

Basic example

import * as React from "react"; import { render } from "react-dom"; import LayeredImage from "react-layered-image"; const style = { position: "absolute", top: 0, right: 0, bottom: 0, left: 0, display: "flex", justifyContent: "center", alignItems: "center", }; const layers = [ "https://llorca.github.io/react-layered-image/static/images/layer-1.png", "https://llorca.github.io/react-layered-image/static/images/layer-2.png", "https://llorca.github.io/react-layered-image/static/images/layer-3.png", ]; render( <div style={style}> <LayeredImage layers={layers} style={{ width: 400 }} /> </div>, document.getElementById("root"), );

API

By default, LayeredImage has a width of 100%. You can set the CSS
width property via a class name or via the style prop
directly. You can use any length or percentage value.

PropTypeDefaultDescription
layersArray<string>Required. Array of image URLs. Use images of same dimension for best results.
aspectRationumber16 / 9Aspect ratio (width / height) of the element.
borderRadiusnumber6Radius of the element.
transitionDurationnumber0.15Duration of the transition.
transitionTimingFunctionstring"ease-out"Timing function of the transition.
lightColorstring"#fff"Color of the light element.
lightOpacitynumber0.2Opacity of the light element.
shadowColorstring"#000"Color of the shadow element.
shadowOpacitynumber0.6Opacity of the shadow element.

Development

Start the webpack development server:

npm run dev

Use Commitizen to commit changes:

npm run commit

GitHub

Recommended