React before after slider component

Simple slider component for comparing images. Before and after.

Demo

https://smeleshkin.github.io/react-before-after-slider-component/

Build

npm run build:npm

Basic usage

npm install react-before-after-slider-component --save

Then use it in your app:

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

const FIRST_IMAGE = {
  imageUrl: 'https://example.com/.../some-image.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	#fff	Custom delimiter background color.
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	(newPosition: number) => void		On delimiter position update callback. Has new position parameter.
feelsOnlyTheDelimiter	false	boolean	false	Only the separator feels clicks. Not any zone of the component.
delimiterIconStyles	false	React.CSSProperties		Custom styles of delimiter icon. E.g. for a logo. See "Custom logo example".
onChangeMode	false	(newMode: MODE) => void		Callback when the slider mode changes. Can be used to disable page scrolling on touch devices while sliding.

Specific Types

interface Image {
    imageUrl: string,
    alt?: string,
}

export enum MODE {
    MOVE = 'move', // Moving the slider
    DEFAULT = 'default', // Resting state
}

Custom logo example

// Pass this as a delimiterIconStyles property
const delimiterIconStyles = {
   width: '50px',
   height: '50px',
   backgroundSize: 'cover',
   borderRadius: 'none',
   backgroundImage: 'url(<some-path-here>)'
}