README
React Compare Image
Simple React component to compare two images using slider.
NOTE: Vue.js Version is also available!
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
 Shota Tamura 🐛 💻 📖 |  Francisco Martinez 💻 |  Tim Field 🐛 |  OscarCR88 💻 |  Md. Tasnim Alam 💻 |  Jane Meredith 💻 |  teddywsi 💻 |