React Simple Star Rating

React Simple Star Rating is a lightweight and easy-to-use star rating component for React. It allows users to rate an item by selecting a number of stars from a predefined set.

Features

• Customizable star icons
• Supports half-star ratings
• Configurable number of stars
• User customizable rating values
• Easy to use and integrate

Installation

To install React Simple Star Rating, simply run the following command:

npm install react-simple-star-rating

Usage

To use the component in your React application, import it and add it to your component's render method:

import React from 'react';
import StarRating from 'react-simple-star-rating';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rating: 0
    };
    this.handleRatingChange = this.handleRatingChange.bind(this);
  }

  handleRatingChange(rating) {
    this.setState({ rating });
  }

  render() {
    return (
      <div>
        <h1>Rate this item</h1>
        <StarRating 
          ratingValue={this.state.rating} 
          onRatingChange={this.handleRatingChange}
        />
      </div>
    );
  }
}

Props

• numberOfStars (Optional, default is 5) - The number of stars that will be displayed.
• ratingValue (Optional, default is 0) - The initial rating value.
• onRatingChange (Required) - The event handler that will be called when the rating changes. It receives the new rating value as its argument.
• starSize (Optional, default is 40) - The size of the star icon in pixels.
• emptyStarColor (Optional, default is '#bbb') - The color of the empty star icons.
• filledStarColor (Optional, default is '#f0b416') - The color of the filled star icons.
• halfStar (Optional, default is false) - Indicates whether half-star ratings are allowed.
• editable (Optional, default is true) - Indicates whether the rating can be edited by the user.

Example

Here's an example of a Star Rating component with customized props:

import React from 'react';
import StarRating from 'react-simple-star-rating';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rating: 2.5
    };
    this.handleRatingChange = this.handleRatingChange.bind(this);
  }

  handleRatingChange(rating) {
    this.setState({ rating });
  }

  render() {
    return (
      <div>
        <h1>Rate this item</h1>
        <StarRating 
          numberOfStars={10} 
          ratingValue={this.state.rating} 
          onRatingChange={this.handleRatingChange}
          starSize={30}
          emptyStarColor="#ddd"
          filledStarColor="#3399FF"
          halfStar={true}
          editable={false}
        />
      </div>
    );
  }
}

Conclusion

React Simple Star Rating is a lightweight and customizable star rating component for React. It's easy to use and integrate into any React application.