A sexy image comparison slider for React.
npm install 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.
``bash`
npm install --save react-before-after-slider
Check out the demo.
`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 (
after={after}
width={640}
height={480}
/>
)
}
}
`
| 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.
- [ ] Remove restriction on passing a hard-coded width and height`
- justapose - JS library for creating before / after image sliders.
- before-after.js - jQuery image comparison slider.
MIT © transitive-bullshit