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.