Before-After-React
BeforeAfter is a lightweight Javascript library to compare images in before/after view.
Installation
BeforeAfter is available as the before-after-react
package on npm.
npm install before-after-react --save
Demo
Basic usage
Import the compnent from npm and just add it to your JSX even without any props the component still work. the component have default images.
; { return <BeforeAfterReact/> ;} ;
Props
The component can get:
firstImgSrc
- {String} - image srcsecondImgSrc
- {String} -image srccontainerClass
- {String} - add your own class to the containercursor
- {String} - a valid css cursor valuevertical
- {Boolean} - default is falseseperatorImg
- {String} - image src
Callback functions
There is no callback function available with BeforeAfterReact.
After install the library
; { return <BeforeAfterReact firstImgSrc="https://upload.wikimedia.org/wikipedia/commons/6/6a/Gallet_clamshell_600x600_1.jpg" secondImgSrc="https://upload.wikimedia.org/wikipedia/commons/2/21/Gallet_clamshell_600x600_7.jpg" cursor="pointer" containerClass="add-my-class" /> ;} ; });