# react-before-after-slider-component-bousing

> fork of smeleshkin/react-before-after-slider-component

Latest version **1.3.3** (published 2022-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-before-after-slider-component-bousing
pnpm add react-before-after-slider-component-bousing
yarn add react-before-after-slider-component-bousing
bun add react-before-after-slider-component-bousing
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2022-05-13 |
| First published | 2022-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | smelesh23@gmail.com |
| Maintainers | jlbousing |
| Keywords | react, component, typescript, slider, compare, comparison, before and after |

## Links

- npm: https://www.npmjs.com/package/react-before-after-slider-component-bousing
- Repository: https://github.com/smeleshkin/react-before-after-slider-component
- Homepage: https://github.com/smeleshkin/react-before-after-slider-component#readme
- Issues: https://github.com/smeleshkin/react-before-after-slider-component/issues
- npm.io page: https://npm.io/package/react-before-after-slider-component-bousing

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.3 (latest) — 2022-05-13
- 1.3.1 — 2022-05-13
- 1.3.0 — 2022-05-13
- 1.2.5 — 2022-05-13
- 1.2.4 — 2022-05-13
- 1.2.2 — 2022-05-13
- 1.2.1 — 2022-05-13
- 1.2.0 — 2022-05-13
- 1.1.9 — 2022-05-13
- 1.1.8 — 2022-05-13
- 1.1.7 — 2022-05-13
- 1.1.6 — 2022-05-13
- 1.1.5 — 2022-05-13
- 1.1.4 — 2022-05-13

## README

# React before after slider component
Simple slider component for comparing images. Before and after.

[![screencast demo](./screencast.gif)](./screencast.gif)

## Demo
https://smeleshkin.github.io/react-before-after-slider-component/
## Build
npm run build:npm
## Basic usage
```
npm install react-before-after-slider-component --save
```

Then use it in your app:
```js
import React from 'react';
import ReactBeforeSliderComponent from 'react-before-after-slider-component';
import 'react-before-after-slider-component/dist/build.css';

const FIRST_IMAGE = {
  imageUrl: 'https://example.com/.../some-image.jpg'
};
const SECOND_IMAGE = {
  imageUrl: 'https://example.com/.../some-image-2.jpg'
};
/* ... */
<ReactBeforeSliderComponent
    firstImage={FIRST_IMAGE}
    secondImage={SECOND_IMAGE}
/>
/* ... */
```
## Props

| Attribute                  | Required  | Type     | Default | Description                                                           
|----------------------------|-----------|----------|---------|-------------------------------
| `firstImage`               | true      | Image    |         | Image object with source url. 
| `secondImage`              | true      | Image    |         | Image object with source url.
| `delimiterColor`           | false     | string   |         | Custom delimiter background color. 
| `currentPercentPosition`   | false     | number   | 50      | Start delimiter position. Or also the current position, if it will change in parent.
| `className`                | false     | string   |         | Custom classname.
| `withResizeFeel`           | false     | boolean  | true    | Feeling to window resizing.
| `onReady`                  | false     | function |         | On slider ready callback.
| `onVisible`                | false     | function |         | On slider visible in viewport callback.
| `onChangePercentPosition`  | false     | function |         | On delimiter position update callback. Has new position parameter.

## Specific Types

```ts
interface Image {
    imageUrl: string,
    alt?: string,
}
```

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