@danielgtmn/react-star-rating NPM

React Star Rating Component

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

📦 Installation

npm install @danielgtmn/react-star-rating
# or
yarn add @danielgtmn/react-star-rating
# or
pnpm add @danielgtmn/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 '@danielgtmn/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 @danielgtmn for announcements

react rating stars component typescript

0.0.4

11 months ago

0.0.2

1 year ago