react-layered-image is an interactive, multi-layer image component for React, inspired by the Apple TV layered images.
npm install react-layered-image
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"),
);
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. |
Start the webpack development server:
npm run dev
Use Commitizen to commit changes:
npm run commit
Author: llorca
Demo: https://llorca.github.io/react-layered-image/
Source Code: https://github.com/llorca/react-layered-image
#react #reactjs #javascript