⭐ Borno Star Rating

A customizable and lightweight React star rating component with support for half-stars, hover effects, and color customization.
Perfect for e-commerce sites, feedback forms, reviews, and any UI that requires rating functionality.

🚀 Features

• 🌟 Supports full & half-star ratings (e.g., 0.5, 1.5, etc.)
• 🎨 Customizable star size, color, and hover color
• 🖱️ Hover effect to show potential selection
• ⚡ Lightweight, written in TypeScript, ready for React 17+
• ✅ Easy to integrate with React projects

Installation

Use the package manager npm to install foobar.

npm install borno-star-rating

🧩 Usage Example

import { StarRating } from "borno-star-rating";

export default function App() {
  const [rating, setRating] = useState(3.5);

  return (
    <div style={{ padding: 20 }}>
      <h2>Rate this product</h2>
      <StarRating
        value={rating}
        onChange={setRating}
        size={40}             // star size in pixels
        color="#facc15"       // selected star color
        hoverColor="#fbbf24"  // color on hover
        shape="star"          // "star", "heart", or "circle"
      />
      <p>Selected Rating: {rating}</p>
    </div>
  );
}

⚙️ Props

| Prop | Type | Default | Description | | ------------ | ------------------------------- | --------- | ----------------------------------- | | value | number | 0 | Current rating value | | onChange | (val: number) => void | — | Callback when user selects a rating | | size | number | 24 | Star size in pixels | | color | string | #facc15 | Color of selected stars | | hoverColor | string | #fbbf24 | Color of stars on hover | | shape | "star" \| "heart" \| "circle" | "star" | Shape of the stars |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT