1.0.2 • Published 2 years ago

react-after-before-slider v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

React after before slider component

Simple slider component for comparing images before and after.

screencast demo

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

AttributeRequiredTypeDefaultDescription
firstImagetrueImageImage object with source url.
secondImagetrueImageImage object with source url.
delimiterColorfalsestringCustom delimiter background color.
showAfterBeforeTextfalsebooleantrueAfter before text on image
currentPercentPositionfalsenumber50Start delimiter position. Or also the current position, if it will change in parent.
classNamefalsestringCustom classname.
withResizeFeelfalsebooleantrueFeeling to window resizing.
onReadyfalsefunctionOn slider ready callback.
onVisiblefalsefunctionOn slider visible in viewport callback.
onChangePercentPositionfalsefunctionOn delimiter position update callback. Has new position parameter.
feelsOnlyTheDelimiterfalsefunctionfalseOnly the separator feels clicks. Not any zone of the component.