demo)
react-before-after-slider (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-slider
Usage
Check out the demo.
import React Component from 'react' import BeforeAfterSlider from 'react-before-after-slider' { const before = 'https://...example1.jpg' const after = 'https://...example2.jpg' return <BeforeAfterSlider = = = = /> }
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
width
andheight
Related
- justapose - JS library for creating before / after image sliders.
- before-after.js - jQuery image comparison slider.
License
MIT © transitive-bullshit