slider

Simple React component to compare two images using slider

Feb 20, 2019
Simple React component to compare two images using slider

React Compare Image

Simple React component to compare two images using slider.

React-Compare-Image

View demo Download Source

Features

  • 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" />;

Props

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

GitHub

Recommended