react-simple-before-after

React Simple Rating

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

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.

License

MIT © awran5