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