React after before slider component

Simple slider component for comparing images before and after.

Demo

https://mridul2820.github.io/react-after-before-slider/

Build

npm run build:npm

Basic usage

npm i react-after-before-slider --save

Then use it in your app:

import React from 'react';
import ReactBeforeSliderComponent from 'react-after-before-slider';
import 'react-after-before-slider/dist/build.css';

const FIRST_IMAGE = {
  imageUrl: 'https://example.com/.../some-image-1.jpg',
};
const SECOND_IMAGE = {
  imageUrl: 'https://example.com/.../some-image-2.jpg',
};

<ReactBeforeSliderComponent
  firstImage={FIRST_IMAGE}
  secondImage={SECOND_IMAGE}
/>;

Props

| Attribute | Required | Type | Default | Description | | ------------------------- | -------- | -------- | ------- | ------------------------------------------------------------------------------------ | | firstImage | true | Image | | Image object with source url. | | secondImage | true | Image | | Image object with source url. | | delimiterColor | false | string | | Custom delimiter background color. | | showAfterBeforeText | false | boolean | true | After before text on image | | currentPercentPosition | false | number | 50 | Start delimiter position. Or also the current position, if it will change in parent. | | className | false | string | | Custom classname. | | withResizeFeel | false | boolean | true | Feeling to window resizing. | | onReady | false | function | | On slider ready callback. | | onVisible | false | function | | On slider visible in viewport callback. | | onChangePercentPosition | false | function | | On delimiter position update callback. Has new position parameter. | | feelsOnlyTheDelimiter | false | function | false | Only the separator feels clicks. Not any zone of the component. |