Awesome

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-slider

Usage

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 width and height

justapose - JS library for creating before / after image sliders.
before-after.js - jQuery image comparison slider.

License

Support my OSS work by <a href="https://twitter.com/transitive_bs">following me on twitter <img src="https://storage.googleapis.com/saasify-assets/twitter-logo.svg" alt="twitter" height="24px" align="center"></a>