https://github.com/transitive-bullshit/react-before-after-slider

A sexy image comparison slider for React.
https://github.com/transitive-bullshit/react-before-after-slider

before-after comparison component image react

Last synced: 3 months ago
JSON representation

A sexy image comparison slider for React.

• Host: GitHub
• URL: https://github.com/transitive-bullshit/react-before-after-slider
• Owner: transitive-bullshit
• Created: 2018-05-31T13:01:14.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-11T23:13:12.000Z (over 4 years ago)
• Last Synced: 2024-10-29T14:50:45.091Z (3 months ago)
• Topics: before-after, comparison, component, image, react
• Language: JavaScript
• Homepage: https://transitive-bullshit.github.io/react-before-after-slider/
• Size: 599 KB
• Stars: 72
• Watchers: 3
• Forks: 18
• Open Issues: 7
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# react-before-after-slider ([demo](https://transitive-bullshit.github.io/react-before-after-slider/))

> A sexy image comparison slider for React.

[![NPM](https://img.shields.io/npm/v/react-before-after-slider.svg)](https://www.npmjs.com/package/react-before-after-slider) [![Build Status](https://travis-ci.com/transitive-bullshit/react-before-after-slider.svg?branch=master)](https://travis-ci.com/transitive-bullshit/react-before-after-slider) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

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

```bash

npm install --save react-before-after-slider

```

## Usage

Check out the [demo](https://transitive-bullshit.github.io/react-before-after-slider/).

```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 (

      

    )

  }

}

```

## 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](https://github.com/transitive-bullshit/react-block-image).  |

| `afterProps`     | object           | { }                                  | Optional extra props to pass to the after [BlockImage](https://github.com/transitive-bullshit/react-block-image).  |

| `...`           | ...              | 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](https://github.com/transitive-bullshit/react-block-image).

## Todo

- [ ] Remove restriction on passing a hard-coded `width` and `height`

## Related

- [justapose](https://juxtapose.knightlab.com/) - JS library for creating before / after image sliders.

- [before-after.js](https://github.com/jotform/before-after.js) - jQuery image comparison slider.

## License

MIT © [transitive-bullshit](https://github.com/transitive-bullshit)

Support my OSS work by following me on twitter