react-layered-image

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

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.

| Prop | Type | Default | Description | | -------------------------- | --------------- | ------------ | --------------------------------------------------------------------------------- | | layers | Array<string> | | Required. Array of image URLs. Use images of same dimension for best results. | | aspectRatio | number | 16 / 9 | Aspect ratio (width / height) of the element. | | borderRadius | number | 6 | Radius of the element. | | transitionDuration | number | 0.15 | Duration of the transition. | | transitionTimingFunction | string | "ease-out" | Timing function of the transition. | | lightColor | string | "#fff" | Color of the light element. | | lightOpacity | number | 0.2 | Opacity of the light element. | | shadowColor | string | "#000" | Color of the shadow element. | | shadowOpacity | number | 0.6 | Opacity of the shadow element. |

Development

Start the webpack development server:

npm run dev

Use Commitizen to commit changes:

npm run commit

License

MIT