Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-compare-image with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactCompareImage = require("react-compare-image")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-compare-image v1.4.1

React component to compare two images using slider.

React Compare Image

All Contributors

Simple React component to compare two images using slider.


NOTE: Vue.js Version is also available!




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

How to use

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)typedefaultdescription
leftImage *stringnullleft image's url
rightImage *stringnullright image's url
sliderPositionPercentagenumber (float)0.5Default line position (from 0 to 1)
sliderLineWidthnumber (px)2line width of slider (by pixel)
sliderLineColorstring"#ffffff"line color of slider
leftImageAltstring''alt props for left image
rightImageAltstring''alt props for right image
leftImageCssobject{}Additional css for left image
rightImageCssobject{}Additional css for right image
leftImageLabelstringnull(>=v1.2.0) Label for the image (e.g. before)
rightImageLabelstringnull(>=v1.2.0) Label for the image (e.g. after)
handleelementnull(>=v1.2.0) Custom 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
skeletonelementnullElement displayed while image is loading
autoReloadSpannumber (ms)nullIf specified, the image is loaded again at the interval specified when loading images failed
autoReloadLimitnumber (count)10Limitation on automatic reload retry count
onSliderPositionChangefunctionnullCallback function called each time the slider changes. The position (0 to 1) of the slider is passed as arg



Shota Tamura
Shota Tamura

🐛 💻 📖
Francisco Martinez
Francisco Martinez

Tim Field
Tim Field


Md. Tasnim Alam
Md. Tasnim Alam

Jane Meredith
Jane Meredith




RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free