Install

npm install @zym-com/image

or

yarn add @zym-com/image

Basic Usage

import Image from "@zym-com/image";
import "@zym-com/image/dist/style.css";
import banner from "./banner1.png";

function App() {
const options = {
    "configuration": {
        "imgUrl": banner,
        "mixBlendModeOpen": false,
        "mixBlendMode": "normal",
        "objectFit": "initial",
        "titleInput": "",
        "altInput": "",
        "borderRadius": 5,
        "loadingType": "eager",
        "blur": 5,
        "brightness": 100,
        "contrast": 100,
        "grayscale": 50,
        "hueRotate": 180,
        "invert": 50,
        "saturate": 100,
        "sepia": 50,
        "textShadow": [
            "rgba(255,255,255,1)",
            0,
            0,
            0
        ],
        "blurConfig": false,
        "brightnessConfig": false,
        "contrastConfig": false,
        "grayscaleConfig": false,
        "hueRotateConfig": false,
        "invertConfig": false,
        "saturateConfig": false,
        "sepiaConfig": false,
        "textShadowConfig": false
    },
    "base": {
        "width": 200,
        "height": 120
    },
    "dataSource": "",
   bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}

 return (
    <>
      <Image {...options} />
    </>
  );
}