Home

Awesome

React Compare Image

All Contributors

<a href="https://www.buymeacoffee.com/FVSUK5u" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" width="180" ></a>

Simple React component to compare two images using slider.

img

NOTE: Vue.js Version is also available!

Demo & Sample codes

Demo & Sample codes

Features

How to use

yarn add react-compare-image
// or
npm install --save react-compare-image

Note: Version 1 or later works only with React16.8 or later. Use version 0 instead.

import ReactCompareImage from 'react-compare-image';

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

Props

Prop (* required)typedefaultdescription
aspectRatio'taller' or 'wider''taller'Which to choose if the aspect ratios of the images are different
handleelementnullCustom handle element. Just pass <React.Fragment /> if you want to remove handle.
handleSizenumber (px)40diameter of slider handle (by pixel)
hoverbooleanfalseWhether to slide at hover
leftImage *stringnullleft image's url
leftImageAltstring''alt props for left image
leftImageCssobject{}Additional css for left image
leftImageLabelstringnullLabel for the image (e.g. before)
onSliderPositionChangefunctionnullCallback function called each time the slider changes. The position (0 to 1) of the slider is passed as arg
rightImage *stringnullright image's url
rightImageAltstring''alt props for right image
rightImageCssobject{}Additional css for right image
rightImageLabelstringnullLabel for the image (e.g. after)
skeletonelementnullElement displayed while image is loading
sliderLineColorstring'#ffffff'line color of slider
sliderLineWidthnumber (px)2line width of slider (by pixel)
sliderPositionPercentagenumber (float)0.5Default line position (from 0 to 1)
verticalbooleanfalseCompare images vertically instead of horizontally. The left image is on the top and the right image is on the bottom.

Supported browzer

Latest modern browsers(Chrome, Safari, Firefox, Edge)