Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/transitive-bullshit/react-before-after-slider
A sexy image comparison slider for React.
https://github.com/transitive-bullshit/react-before-after-slider
before-after comparison component image react
Last synced: 23 days ago
JSON representation
A sexy image comparison slider for React.
- Host: GitHub
- URL: https://github.com/transitive-bullshit/react-before-after-slider
- Owner: transitive-bullshit
- Created: 2018-05-31T13:01:14.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-11T23:13:12.000Z (almost 4 years ago)
- Last Synced: 2024-05-02T00:53:49.793Z (about 2 months ago)
- Topics: before-after, comparison, component, image, react
- Language: JavaScript
- Homepage: https://transitive-bullshit.github.io/react-before-after-slider/
- Size: 599 KB
- Stars: 70
- Watchers: 3
- Forks: 17
- Open Issues: 7
-
Metadata Files:
- Readme: readme.md
Lists
- awesome - transitive-bullshit/react-before-after-slider - A sexy image comparison slider for React. (JavaScript)
- awesome-stars - transitive-bullshit/react-before-after-slider - A sexy image comparison slider for React. (JavaScript)
README
# react-before-after-slider ([demo](https://transitive-bullshit.github.io/react-before-after-slider/))
> A sexy image comparison slider for React.
[](https://www.npmjs.com/package/react-before-after-slider) [](https://travis-ci.com/transitive-bullshit/react-before-after-slider) [](https://standardjs.com)
This component is perfect for displaying the differences between two images, allowing the user to slide over them for an enticing before & after reveal effect.
## Install
```bash
npm install --save react-before-after-slider
```
## Usage
Check out the [demo](https://transitive-bullshit.github.io/react-before-after-slider/).
```jsx
import React, { Component } from 'react'
import BeforeAfterSlider from 'react-before-after-slider'
class Example extends Component {
render () {
const before = 'https://...example1.jpg'
const after = 'https://...example2.jpg'
return (
)
}
}
```
## Props
| Property | Type | Default | Description |
|:--------------|:-------------------|:--------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|
| `before` | string | **Required** | URL of before image to use. |
| `after` | string | **Required** | URL of after image to use. |
| `width` | number | **Required** | Width in pixels for the component. |
| `height` | number | **Required** | Height in pixels for the component. |
| `defaultProgress` | number | 0.5 | Where the progress slider should start (float between 0 and 1). |
| `className` | string | | Class name to add to root div element. |
| `beforeClassName` | string | | Class name to add to before element. |
| `afterClassName` | string | | Class name to add to after element. |
| `beforeProps` | object | { } | Optional extra props to pass to the before [BlockImage](https://github.com/transitive-bullshit/react-block-image). |
| `afterProps` | object | { } | Optional extra props to pass to the after [BlockImage](https://github.com/transitive-bullshit/react-block-image). |
| `...` | ... | undefined | Any other props are applied to the root div element. |
Note that by default, both `before` and `after` will be displayed as background images with `background-size: cover` via [react-block-image](https://github.com/transitive-bullshit/react-block-image).
## Todo
- [ ] Remove restriction on passing a hard-coded `width` and `height`
## Related
- [justapose](https://juxtapose.knightlab.com/) - JS library for creating before / after image sliders.
- [before-after.js](https://github.com/jotform/before-after.js) - jQuery image comparison slider.
## License
MIT © [transitive-bullshit](https://github.com/transitive-bullshit)
Support my OSS work by following me on twitter 