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

Related

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

License

MIT © transitive-bullshit