React Star Rating Component

A simple, customizable, and accessible star rating component for React applications.

📦 Installation

npm install @gietmanic/react-star-rating
# or
yarn add @gietmanic/react-star-rating
# or
pnpm add @gietmanic/react-star-rating 

✨ Features

• 🌟 Customizable number of stars (min/max)
• 🎨 Custom colors and sizes
• 🔄 Controlled and uncontrolled usage
• ♿ Accessible
• 🎯 TypeScript support
• ✨ Hover effects

🚀 Quick Start

import { StarRating } from '@gietmanic/react-star-rating';

function App() {
  return (
    <StarRating
      onChange={(rating) => console.log('New rating:', rating)}
      initialRating={3}
      size={32}
      activeColor="#FBBF24"
      inactiveColor="#D1D5DB"
      minStars={1}
      maxStars={10}
      showMinStarsText={true}
      showRatingText={true}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onChange | (rating: number) => void | undefined | Callback function called when rating changes | | initialRating | number | 0 | Initial rating value | | size | number | 32 | Size of stars in pixels | | activeColor | string | '#FBBF24' | Color of active (filled) stars | | inactiveColor | string | '#D1D5DB' | Color of inactive stars | | minStars | number | 1 | Minimum number of stars required | | maxStars | number | 5 | Maximum number of stars available | | showMinStarsText | boolean | true | Show/hide minimum stars requirement text | | showRatingText | boolean | true | Show/hide current rating text |

📋 Usage Examples

Basic Usage

<StarRating onChange={(rating) => console.log(rating)} />

Custom Range

<StarRating minStars={2} maxStars={10} />

Custom Colors

<StarRating
  activeColor="#FFD700"
  inactiveColor="#C0C0C0"
/>

Hide Texts

<StarRating
  showMinStarsText={false}
  showRatingText={false}
/>

Full Customization

<StarRating
  onChange={(rating) => console.log('New rating:', rating)}
  initialRating={3}
  size={32}
  activeColor="#FBBF24"
  inactiveColor="#D1D5DB"
  minStars={1}
  maxStars={10}
  showMinStarsText={true}
  showRatingText={true}
/>

📝 License

MIT

🤝 Contributing

Contributions are welcome!

1. Fork it
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📫 Support

• Create a GitHub issue for bug reports and feature requests
• Follow @gietmanic for announcements