Simple React component to compare two images using slider.
NOTE: Vue.js Version is also available!
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" />;Prop (* required) type default description aspectRatio
'taller' or 'wider' 'taller' Which to choose if the aspect ratios of the images are different handle element null 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 leftImage * string null left image's url leftImageAlt string '' alt props for left image leftImageCss object {} Additional css for left image leftImageLabel string null Label for the image (e.g. before) onSliderPositionChange function null Callback function called each time the slider changes. The position (0 to 1) of the slider is passed as arg rightImage * string null right image's url rightImageAlt string '' alt props for right image rightImageCss object {} Additional css for right image rightImageLabel string null Label for the image (e.g. after) skeleton element null Element displayed while image is loading sliderLineColor string '#ffffff' line color of slider sliderLineWidth number (px) 2 line width of slider (by pixel) sliderPositionPercentage number (float) 0.5 Default line position (from 0 to 1) vertical boolean false Compare images vertically instead of horizontally. The left image is on the top and the right image is on the bottom.
Latest modern browsers(Chrome, Safari, Firefox, Edge)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4