react-before-after-slider (demo)
A sexy image comparison slider for React.
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
npm install --save react-before-after-sliderUsage
Check out the demo.
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 (
<BeforeAfterSlider
before={before}
after={after}
width={640}
height={480}
/>
)
}
}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. |
afterProps |
object | { } | Optional extra props to pass to the after BlockImage. |
... |
... | 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.
Todo
- Remove restriction on passing a hard-coded
widthandheight
Related
- justapose - JS library for creating before / after image sliders.
- before-after.js - jQuery image comparison slider.
License
MIT © transitive-bullshit
Support my OSS work by following me on twitter
