react-next-star-rating

A fully customizable, lightweight star rating component for React and Next.js applications. Built with TypeScript for excellent type safety.

Features

• ⭐️ Customizable number of stars
• 📏 Adjustable size
• 🚫 Read-only mode support
• 🖱️ Interactive hover effects
• 📦 distinct ESM and CJS builds
• ✨ Zero external dependencies (besides React)

Installation

npm install react-next-star-rating
# or
yarn add react-next-star-rating
# or
pnpm add react-next-star-rating

Usage

Here is a basic example of how to use the StarRating component:

import { useState } from 'react';
import { StarRating } from 'react-next-star-rating';

const App = () => {
  const [rating, setRating] = useState(3);

  const handleRatingChange = (newRating: number) => {
    setRating(newRating);
    console.log(`User rated: ${newRating}`);
  };

  return (
    <div>
      <h2>Rate this product:</h2>
      <StarRating
        value={rating}
        onChange={handleRatingChange}
        max={5}
        size={32}
      />
      
      <h3>Read-only view:</h3>
      <StarRating value={4} readOnly size={20} />
    </div>
  );
};

export default App;

API Reference

<StarRating />

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | value | number | 0 | The current rating value. | | max | number | 5 | The total number of stars to display. | | size | number | 24 | The size of each star in pixels (width and height). | | readOnly | boolean | false | If true, the component will be non-interactive (no hover/click). | | onChange | (value: number) => void | undefined | Callback function triggered when a star is clicked. receives the new rating value. |

License

ISC