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
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