Install

npm install @zym-com/rating

or

yarn add @zym-com/rating

Basic Usage

import Rating from "@zym-com/rating";
import "@zym-com/rating/dist/style.css";

function App() {
const options = {
    "configuration": {
        "itemsNumber": 5,
        "formatValue": false,
        "spaceInside": "none",
        "spaceBetween": "none",
        "radius": "none",
        "orientation": "horizontal",
        "iconType": "default",
        "iconSelectType": "fillStar",
        "pathText": "M776.3 957.2c-4.1 0-8.2-1-12-3.1L513 817.1 261.7 954.2c-8.4 4.6-18.7 4-26.4-1.6-7.8-5.5-11.7-15-10.2-24.5l48.2-291.6-204-206.4c-6.6-6.7-8.9-16.5-5.9-25.5 3-8.9 10.7-15.4 20-16.8l281.2-42.4L490.4 80.7c4.1-8.7 12.9-14.3 22.6-14.3 9.6 0 18.4 5.6 22.6 14.3l125.9 264.8 281.2 42.4c9.3 1.4 17 7.9 20 16.8s0.7 18.8-5.9 25.5l-204 206.4L801 928.2c1.6 9.4-2.4 18.9-10.2 24.5-4.4 3-9.4 4.5-14.5 4.5zM139.3 430l178.4 180.5c5.6 5.7 8.2 13.8 6.9 21.7l-41.9 253.6L501 766.6c7.5-4.1 16.5-4.1 23.9 0l218.3 119.1-41.9-253.6c-1.3-7.9 1.3-16 6.9-21.7L886.7 430 641 392.9c-8.2-1.2-15.3-6.5-18.8-14L513 149.6 403.9 378.9a25.17 25.17 0 0 1-18.8 14L139.3 430z",
        "itemStrokeWidth": 10,
        "boxBorderWidth": 10,
        "inactiveFillColor": "rgba(217, 189, 108,0.2)",
        "inactiveStrokeColor": "rgba(0,0,0,0)",
        "inactiveBoxColor": "rgba(0,0,0,0)",
        "inactiveBoxBorderColor": "rgba(0,0,0,0)",
        "activeFillColor": "rgba(217, 189, 108,1)",
        "activeStrokeColor": "rgba(0,0,0,0)",
        "activeBoxColor": "rgba(0,0,0,0)",
        "activeBoxBorderColor": "rgba(0,0,0,0)"
    },
    "base": {
        "width": 300,
        "height": 80
    },
    "dataSource": [
        {
            "value": 50,
            "total": 100
        }
    ],
   bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}

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