Skip to content

transitive-bullshit/react-before-after-slider

Repository files navigation

react-before-after-slider (demo)

A sexy image comparison slider for React.

NPM Build Status JavaScript Style Guide

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

License

MIT © transitive-bullshit

Support my OSS work by following me on twitter twitter