Popularity
3.9
Growing
Activity
2.3
-
305
1
76
Monthly Downloads: 0
Programming language: TypeScript
License: MIT License
Tags:
UI Components
Photo / Image
Latest version: v3.0.2
react-compare-image alternatives and similar libraries
Based on the "Photo / Image" category.
Alternatively, view react-compare-image alternatives based on common mentions on social networks and blogs.
-
react-images
๐ A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Promo
surveyjs.io
Do you think we are missing an alternative of react-compare-image or a related project?
README
React Compare Image
Simple React component to compare two images using slider.
NOTE: Vue.js Version is also available!
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. |
Supported browzer
Latest modern browsers(Chrome, Safari, Firefox, Edge)