React Compare Image

Simple React component to compare two images using slider.

NOTE: Vue.js Version is also available!

Demo

DEMO

Install

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

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

Dependencies

• css-element-queries to detect element resize event.
• prop-types

Contributors