# before-after-image-slider

> It is a tool in your React projects that allows you to easily display the before and after states of an image. Its usage is quite simple. By moving the cursor over the image, you can transition between the two images you have specified.

Latest version **1.0.8** (published 2024-01-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install before-after-image-slider
pnpm add before-after-image-slider
yarn add before-after-image-slider
bun add before-after-image-slider
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2024-01-11 |
| First published | 2023-12-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yvzyldrm |
| Maintainers | yvzyldrm |
| Keywords | before-after-image, before-after-slider, react before after image |

## Links

- npm: https://www.npmjs.com/package/before-after-image-slider
- npm.io page: https://npm.io/package/before-after-image-slider

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.0.8 (latest) — 2024-01-11
- 1.0.7 — 2024-01-11
- 1.0.5 — 2024-01-11
- 1.0.4 — 2023-12-28
- 1.0.3 — 2023-12-28
- 1.0.2 — 2023-12-28
- 1.0.1 — 2023-12-28
- 1.0.0 — 2023-12-28

## README

# Before After Image Slider

It is a tool in your React projects that allows you to easily display the before and after states of an image. Its usage is quite simple. By moving the cursor over the image, you can transition between the two images you have specified.

## Installation

```sh
npm i before-after-image-slider
```

## Example

```react
<div className="w-100>
    <BeforeAfterImage
        beforeImage="Image 1"
        afterImage="Image 2"
    />
</div>
```

## Props

| Prop        | Tag    |
| ----------- | ------ |
| beforeImage | string |
| afterImage  | string |

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