1.0.2 • Published 2 years ago
react-after-before-slider v1.0.2
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. |