1.0.25 • Published 8 months ago

react-simple-image-comparator v1.0.25

Weekly downloads
-
License
ISC
Repository
github
Last release
8 months ago

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:

PropTypeDescription
firstImg: (required)stringthe path or URL to the first image to be compared.
secondImg: (required)stringthe path or URL to the second image to be compared.
ratio: (optional)stringthe 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)numberthe initial position of the slider, as a percentage. Defaults to 50.
styles: (optional)objectan 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