# before-to-after

> This package provides a simple way to create a before and after effect using two images.

Latest version **0.1.74** (published 2023-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install before-to-after
pnpm add before-to-after
yarn add before-to-after
bun add before-to-after
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.74 |
| Published | 2023-12-15 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 19.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bismark Arroyo |
| Maintainers | bisarroyo |
| Keywords | before-to-after, image-before, slide-images |

## Links

- npm: https://www.npmjs.com/package/before-to-after
- Repository: https://github.com/bisarroyo/before-to-after
- Homepage: https://www.npmjs.com/package/before-to-after
- Issues: https://github.com/bisarroyo/before-to-after/issues
- npm.io page: https://npm.io/package/before-to-after

## Dependencies (2)

- [vite-plugin-dts](https://npm.io/package/vite-plugin-dts.md) ^3.6.4
- [rollup-plugin-css-only](https://npm.io/package/rollup-plugin-css-only.md) ^4.5.2

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.1.74 (latest) — 2023-12-15
- 0.1.73 — 2023-12-15
- 0.1.72 — 2023-12-15
- 0.1.71 — 2023-12-15
- 0.1.7 — 2023-12-15
- 0.1.6 — 2023-12-11
- 0.1.5 — 2023-12-11
- 0.1.4 — 2023-12-11
- 0.1.3 — 2023-12-11
- 0.1.2 — 2023-12-11
- 0.1.1 — 2023-12-11
- 0.1.0 — 2023-12-05

## README

# Before to after

This package provides a simple way to create a before and after effect using two images. It allows you to easily create this effect by passing the container ID and an optional configuration object with the following parameters:

## Installation

Install before-to-after with npm

```bash
  npm i before-to-after
```

## Usage/Examples

Add container with the id `btaContainer` and inside add the img tag with the `before-image` and `after-image` id

```html
<div id="btaContainer">
  <img src="/image-1.jpg" id="before-image" alt="" />
  <img src="/image-2.jpeg" id="after-image" alt="" />
</div>
```

create the instance of before-to-after

```javascript
import beforeAfterEffect from 'before-to-after'

const bta = new beforeAfterEffect('btaContainer', {
  width: '500px',
  height: '300px',
  rangeInitialValue: '0',
  rangeInitialColor: '#000000'
})
```

Object conf is optional.

## API Reference

| Parameter           | Type     | Description                                                                           |
| :------------------ | :------- | :------------------------------------------------------------------------------------ |
| `width`             | `string` | **optional**. Specifies the width of the container element. Default value: '500px'.   |
| `height`            | `string` | **optional**. Specifies the height of the container element. Default value: '300px'   |
| `rangeInitialValue` | `string` | **optional**. Sets the initial value of the position. Default value: '50'.            |
| `rangeInitialColor` | `string` | **optional**. Defines the initial color of the range input. Default value: '#000000'. |

## Authors

- [@bisarroyo](https://github.com/bisarroyo)

## Support

For support, email bis.arroyo@gmail.com

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