A React rating component that supports Next.js SSR and allows fractional step ratings for precise user input. The component is customizable, lightweight, and optimized for performance.
npm install @siamf/rating

- Small in Size
- Zero Dependency
- Fractional step (It support any fractional value)
- Custom Icon
- All necessary options
``bash`
$ npm i @siamf/rating
javascript
"use client"
import { useState } from "react";
import { Rating } from "@siamf/rating";const MyComponent = () => {
const [rating, setRating] = useState(0);
return (
value={rating}
onChange={(e) => setRating(e)}
fractions={0.1}
/>
);
};export default MyComponent;
``| Name | Description | Type | Default/Required |
|---|---|---|---|
| maxRating | Rating star count | number | 5 |
| value | The value of rating (You can use Rating component with controls using this value prop) | number | Required |
| icon | Change the icon of Rating Component (Only SVG Icon supported) | React Element | Optional |
| fractions | Fractional Step For Icon | number | 1 |
| onChange | The new rating value when clicked | (newRating)=> void | Optional |
| onHover | The new rating value when hovered | (newRating)=> void | ease |
| readOnly | The interactivity of the icon | boolean | false |
| Size | The Size of the Icon | number | 24 |
| emptyColor | The color of the empty Icon | string | #dfe2e6 |
| fillColor | The color of the fill Icon | string | #fab005 |
| toolTip | For showing tooltip | boolean | false |
| customTooltip | Custom tooltip for every step. Here step will 2 decimal position number for each step | {step:number, text:string}[] | optional |