# react-layered-image

> An interactive, multi-layer image component for React

Latest version **2.0.9** (published 2022-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-layered-image
pnpm add react-layered-image
yarn add react-layered-image
bun add react-layered-image
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.9 |
| Published | 2022-07-05 |
| First published | 2017-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 35.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Antoine Llorca |
| Maintainers | llorca |

## Links

- npm: https://www.npmjs.com/package/react-layered-image
- Repository: https://github.com/llorca/react-layered-image
- Homepage: https://github.com/llorca/react-layered-image#readme
- Issues: https://github.com/llorca/react-layered-image/issues
- npm.io page: https://npm.io/package/react-layered-image

## Recent versions

- 2.0.9 (latest) — 2022-07-05
- 2.0.8 — 2022-07-05
- 2.0.7 — 2022-07-05
- 2.0.6 — 2020-09-13
- 2.0.5 — 2020-09-13
- 2.0.4 — 2020-09-13
- 2.0.3 — 2020-09-13
- 2.0.2 — 2020-09-12
- 2.0.1 — 2020-09-12
- 2.0.0 — 2020-09-12
- 1.3.2 — 2020-09-08
- 1.3.1 — 2017-12-07
- 1.3.0 — 2017-12-06
- 1.2.1 — 2017-12-04
- 1.2.0 — 2017-12-04
- … 2 more at https://npm.io/package/react-layered-image/versions

## README

# react-layered-image

[react-layered-image](https://llorca.github.io/react-layered-image/) is an interactive, multi-layer image component for
[React](https://reactjs.org/), inspired by the
[Apple TV layered images](https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/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

```js
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`](https://developer.mozilla.org/en-US/docs/Web/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](https://github.com/webpack/webpack) development server:

```
npm run dev
```

Use [Commitizen](https://github.com/commitizen/cz-cli) to commit changes:

```
npm run commit
```

## License

[MIT](./LICENSE)

---
_Source: https://npm.io/package/react-layered-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._