Solid Compare Image

Package based on react-compare-image

1. Installation
2. Implementation
3. References

Installation

# npm
npm install solid-compare-image

# yarn
yarn add solid-compare-image

Implementation

import SolidCompareImage from "solid-compare-image";

const App: Component = () => {

  return (
    <SolidCompareImage
        leftImage={...}
        rightImage={...}
    />
  );
};

export default App;

References

Props

| Name | Values/Type | Required | Default | Description | | ---- | ----------- | -------- | ------- | ----------- | | aspectRatio | string | No | "taller" | Which to choose if the aspect ratios of the images are different. This prop can receive values taller and wider or custom aspect ratio like 16:9 1:1 4:3 etc. To custom aspect ratio, you must use the colon (:) to separate the width and height | | handle | Element | No | - | Custom element | | handleSize | number | No | 40 | Diameter of handle | | hover | boolean | No | 40 | Whether to slide at hover | | leftImage | string | Yes | false | Left image's url | | leftImageAlt | string | No | - | Alt props for left image | | leftImageCss | object | No | - | Custom css for left image | | leftImageLabel | boolean | No | - | Label for left Image | | leftPositionLabel | "top" \| "center" \| "bottom" | No | center | Position for left label | | rightImage | string | Yes | - | Right image's url | | rightImageAlt | string | No | - | Alt props for right image | | rightImageCss | object | No | - | Custom css for right image | | rightImageLabel | string | No | - | Label for right Image | | rightPositionLabel | "top" \| "center" \| "bottom" | No | center | Position for right label | | skeleton | Element | No | - | Element to use like preview | | sliderLineColor | string | No | "#fff" | Line color of slider | | sliderLineWidth | number | No | 2 | Line width of slider (by pixel) | | sliderPositionPercentage | number | No | 0.5 | Default line position (from 0 to 1) | | vertical | boolean | No | false | Compare images vertically instead of horizontally. The left image is on the top and the right image is on the bottom |

Events

| Name | Params | Description | | ---- | ----------- | -------- | | onSliderPositionChange | position:number| Callback function called each time the slider changes. The position (0 to 1) of the slider is passed as arg |