1.0.25 • Published 8 months ago
react-simple-image-comparator v1.0.25
react-simple-image-comparator
This is a React component that allows you to compare two images by using a slider that reveals more or less of the second image. The component uses styled-components to apply CSS styles to the different elements.
How to install
To install the component run:
npm i react-simple-image-comparator
How to use
To use the component, you need to import it into your React project:
import ImageComparator from "react-simple-image-comparator";
Then, you can use it in your JSX code like this:
<ImageComparator
firstImg="path/to/first/image"
secondImg="path/to/second/image"
ratio="16/9" // optional, defaults to "1/1"
initiaSliderlValue={50} // optional, defaults to 50
styles={{ // optional
firstImg: { width: "100%" },
secondImg: { width: "100%" },
container: { borderRadius: "0.5rem" }
}}
/>
Props
The component accepts the following props:
Prop | Type | Description |
---|---|---|
firstImg: (required) | string | the path or URL to the first image to be compared. |
secondImg: (required) | string | the path or URL to the second image to be compared. |
ratio: (optional) | string | the aspect ratio of the image container. It should be a string in the form "width/height", e.g. "16/9". Defaults to "1/1" |
initialSliderValue: (optional) | number | the initial position of the slider, as a percentage. Defaults to 50. |
styles: (optional) | object | an object that contains CSS styles to apply to the different elements of the component. It should have the following structure: |
{
firstImg: {}, // styles for the first image
secondImg: {}, // styles for the second image
container: {} // styles for the container div
}
License
This component is released under the ISC license.
1.0.25
8 months ago
1.0.24
8 months ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.23
2 years ago
1.0.20
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago