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:

{
  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.