Before-After-React

BeforeAfter is a 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

Live Demo

Before-After-React Sandbox- live demo

Basic usage

Import the component from node_modules and just add it to your JSX even without any props the component still works. The component has 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 src
• secondImgSrc - {String} -image src
• containerClass - {String} - add your own class to the container
• cursor - {String} - a valid css cursor value
• vertical - {Boolean} - default is false
• seperatorImg - {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;

});