Package Exports

react-before-after-slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-before-after-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.