React Compare Image

Simple React component to compare two images using slider.

NOTE: Vue.js Version is also available!

Demo

yarn add react-compare-image

Note: use v0.*.* If you are using React v.16.7 or older.

yarn add react-compare-image@^0.8.2

Simple
Responsive (fit to the parent width)
Size difference between two images handled correctly. Element size determined by following two factors:
- width of the parent
- right image's aspect ratio

yarn add react-compare-image

// or

npm install --save react-compare-image

import ReactCompareImage from 'react-compare-image';

<ReactCompareImage leftImage="image1.jpg" rightImage="image2.jpg" />;

Prop (* required)	type	default	description
leftImage *	string	null	left image's url
rightImage *	string	null	right image's url
sliderPositionPercentage	number (float)	0.5	Default line position (from 0 to 1)
sliderLineWidth	number (px)	2	line width of slider (by pixel)
sliderLineColor	string	"#ffffff"	line color of slider
leftImageAlt	string	''	alt props for left image
rightImageAlt	string	''	alt props for right image
leftImageCss	object	{}	Additional css for left image
rightImageCss	object	{}	Additional css for right image
leftImageLabel	string	null	(>=v1.2.0) Label for the image (e.g. `before`)
rightImageLabel	string	null	(>=v1.2.0) Label for the image (e.g. `after`)
handle	element	null	(>=v1.2.0) Custom handle element. Just pass `<React.Fragment />` if you want to remove handle.
handleSize	number (px)	40	diameter of slider handle (by pixel)
hover	boolean	false	Whether to slide at hover
skeleton	element	null	Element displayed while image is loading
autoReloadSpan	number (ms)	null	If specified, the image is loaded again at the interval specified when loading images failed
autoReloadLimit	number (count)	10	Limitation on automatic reload retry count
onSliderPositionChange	function	null	Callback function called each time the slider changes. The position (0 to 1) of the slider is passed as arg