React-simple-before-after NPM

React Simple Rating

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

npm bundle size GitHub

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

react star rating react component react rating

@everything-registry/sub-chunk-2612

0.1.0

2 years ago