Popularity
2.1
Growing
Activity
7.7
Declining
122
2
28

Monthly Downloads: 0
Programming language: JavaScript
Tags: UI Components     Photo / Image    
Latest version: v2.0.4

react-compare-image alternatives and similar libraries

Based on the "Photo / Image" category

Do you think we are missing an alternative of react-compare-image or a related project?

Add another 'Photo / Image' Library

README

React Compare Image

All Contributors

Simple React component to compare two images using slider.

img

NOTE: Vue.js Version is also available!

Demo & Sample codes

Demo & Sample codes

Features

  • Simple
  • Responsive (always fit to the parent width)
  • Horizontal & Vertical comparison

How to use

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

Props

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.

Dependencies

Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> Shota Tamura🐛 💻 📖 Francisco Martinez💻 Tim Field🐛 OscarCR88💻 Md. Tasnim Alam💻 Jane Meredith💻 teddywsi💻 Queen Vinyl Darkscratch💻

<!-- markdownlint-enable --> <!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->