Skip to content

BeforeAfter is a lightweight Javascript library to compare images in before/after view.

License

Notifications You must be signed in to change notification settings

roeib/Before-After-React

Repository files navigation

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;

});

About

BeforeAfter is a lightweight Javascript library to compare images in before/after view.

Resources

License

Stars

Watchers

Forks

Packages

No packages published