Skip to content
React component to compare two images using slider.
Branch: master
Clone or download
Latest commit cba975f Mar 4, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook add storybook May 24, 2018
public add animation Jul 13, 2018
src add samples, and little fixes Feb 25, 2019
stories add samples, and little fixes Feb 25, 2019
.npmignore use netlify not firebase for hosting May 29, 2018
.prettierrc.yml first commit May 23, 2018
LICENSE first commit May 23, 2018
jest.config.js add basic tests Aug 19, 2018
webpack.production.config.js simplify logic May 24, 2018

React Compare Image

Simple React component to compare two images using slider.


NOTE: Vue.js Version is also available!




If you use react and react-dom v.16.8 or later, please try the beta version! Beta version is more robust and stable thanks to Hooks which is the new function of react.

yarn add react-compare-image@beta


  • 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
leftImageCss object {} Additional css for left image
rightImageCss object {} Additional css for right image
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


You can’t perform that action at this time.