React component to compare two images using slider.

Usage no npm install needed!

<script type="module">
  import reactImageComparison from '';


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) 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



Shota Tamura
Shota Tamura

🐛 💻 📖
Francisco Martinez
Francisco Martinez

Tim Field
Tim Field


Md. Tasnim Alam
Md. Tasnim Alam

Jane Meredith
Jane Meredith