⭐️ React Smart Rating

A lightweight, fully customizable React rating component with support for fractional ratings, custom icons, color customization, and read-only mode.
Perfect for product reviews, feedback forms, or any app that needs a modern, flexible rating UI.

🚀 Features

⭐ Fractional Ratings (e.g. 4.3, 2.7)
⚙️ Customizable Icons — use any React icon (Lucide, Heroicons, FontAwesome)
🎨 Custom Colors & Sizes
🔒 Read-only Mode
🧩 TypeScript Support
💡 Lightweight — under 8KB and no external dependencies (except React)

📦 Installation

React Smart Rating works seamlessly with npm, yarn, and pnpm — choose your favorite package manager 👇

Package Manager	Command
npm	npm install react-smart-rating
pnpm	pnpm add react-smart-rating
yarn	yarn add react-smart-rating

📸 Demo

🧠 Quick Usage

  import { ReactSmartRating } from "react-smart-rating";
  import { Heart } from "lucide-react";

  export default function Example() {
    const [rating, setRating]= useState(5)
    return (
      <div>
        {/* Default */}
        <ReactSmartRating initialRating={rating} onChange={(v) => setRating(v)} />

        {/* Half-step */}
        <ReactSmartRating step={0.5} />

        {/* Custom icon */}
        <ReactSmartRating icon={Heart} activeColor="red" step={0.5} />

        {/* Read only */}
        <ReactSmartRating initialRating={rating} readOnly />
      </div>
    );
  }

⚙️ Props

Prop	Type	Default	Description
`totalStars`	`number`	`5`	Total number of rating icons
`initialRating`	`number`	`0`	Initial (float) rating value
`readOnly`	`boolean`	`false`	Disable interactions if true
`onChange`	`(rating: number) => void`	—	Callback fired when rating changes
`icon`	`React.ElementType`	`Star`	Custom icon component
`activeColor`	`string`	`#facc15`	Color for filled stars
`inactiveColor`	`string`	`#d1d5db`	Color for empty stars
`size`	`number`	`24`	Icon size in pixels
`step`	`number`	`1`	Rating step step (1, 0.5, 0.1)

🧩 Example with Fractional Rating

<RatingStar totalStars={5} initialRating={3.7} step={0.1} readOnly />

🪶 License

This project is licensed under the MIT License — see the LICENSE file for details.

Made with ❤️ by Nihar Mondal

Package detail

react-smart-rating

readme