abdullahceylan/react-before-after-slider-component

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	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.
delimiterIconStyles	false	React.CSSProperties		Custom styles of delimiter icon. E.g. for a logo. See "Custom logo example"

Specific Types

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

Custom logo example

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