before-after-react
v1.0.5
Published
React package to compare images in before/after view
Downloads
1,465
Readme
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.
import React from 'react';
import BeforeAfterReact from 'before-after-react'
function App() {
return (
<BeforeAfterReact/>
);
}
export default App;
##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
import React from 'react';
import BeforeAfterReact from 'before-after-react'
function App() {
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"
/>
);
}
export default App;
});