react-simple-before-after

A simple yet powerful react component for adding a nice before after image slider to your project.

Usage no npm install needed!

<script type="module">
  import reactSimpleBeforeAfter from 'https://cdn.skypack.dev/react-simple-before-after';
</script>

README

React Simple Rating

A simple yet powerful react component for adding a nice before after image slider to your project.

NPM npm bundle size GitHub

screenshot

Install

npm

npm i react-simple-before-after

Yarn

yarn add react-simple-before-after

Usage

import { BeforeAfter } from 'react-simple-before-after'

export default function MyComponent() {
  return (
    <div className='App'>
      <BeforeAfter
        beforeImage='https://picsum.photos/id/646/1920/1080?grayscale'
        afterImage='https://picsum.photos/id/646/1920/1080'
        /* Other Props */
      />
    </div>
  )
}

Available Props

Prop Type Options Description Default
beforeImage string Required Before image src -
afterImage string Required After image src -
pointerMove boolean Optional Enables onPointerMove instead of input onChange false
onChange function Optional onChange callback using input type range method (default) -
onPointerMove function Optional onPointerMove callback available when pointerMove is enabled -
onPointerEnter function Optional onPointerEnter callback -
onPointerLeave function Optional onPointerLeave callback -
className string Optional Main div className before-after-slider
beforeClassName string Optional Before div className before
afterClassName string Optional After div className after
buttonClassName string Optional Button div className (not availabe if pointerMove is enabled) resize-button
style React.CSSProperties Optional Main div inline style -
beforeStyle React.CSSProperties Optional Before div inline style -
afterStyle React.CSSProperties Optional After div inline style -
buttonStyle React.CSSProperties Optional Button div inline style (not availabe when pointerMove is enabled) -


Demo

See demo in action.


Edit react-before-after-slider

License

MIT © awran5