react-rating vs react-simple-star-rating vs react-star-ratings vs react-rating-stars-component

Package	Downloads	Stars	Size	Issues	Publish	License

react-rating	48,414	517	-	23	6 years ago	MIT
react-simple-star-rating	39,407	145	44.8 kB	34	-	MIT
react-star-ratings	27,632	154	-	43	7 years ago	BSD-3-Clause
react-rating-stars-component	17,485	71	-	17	5 years ago	ISC

Package

Downloads

Stars

Size

Issues

Publish

License

react-rating

48,414

517

6 years ago

MIT

react-simple-star-rating

39,407

145

44.8 kB

MIT

react-star-ratings

27,632

154

7 years ago

BSD-3-Clause

react-rating-stars-component

17,485

5 years ago

ISC

Customization

react-rating:
react-rating offers extensive customization options, allowing developers to style the rating component using CSS and customize the rendering of stars through props. This flexibility enables the creation of unique and branded rating interfaces.
react-simple-star-rating:
react-simple-star-rating focuses on simplicity with limited but effective customization options. It allows for easy styling of stars and supports half-star ratings, making it a great choice for projects that prioritize a clean and straightforward design without excessive complexity.
react-star-ratings:
react-star-ratings allows for detailed customization, including the ability to use custom star images, set different colors for different rating levels, and control the overall appearance through props. This library is ideal for projects that require more intricate design elements and greater control over the rating interface.
react-rating-stars-component:
react-rating-stars-component provides good customization capabilities, particularly for star size, color, and the ability to render custom icons. It strikes a balance between ease of use and flexibility, making it suitable for most design requirements.

Fractional Ratings

react-rating:
react-rating supports fractional ratings, including whole, half, and custom fractions, providing flexibility in how ratings are given and displayed. This feature is particularly useful for applications that require more nuanced feedback from users.
react-simple-star-rating:
react-simple-star-rating supports half-star ratings, allowing for more precise ratings while maintaining a simple and intuitive interface. This feature enhances the component's usability without adding complexity.
react-star-ratings:
react-star-ratings supports half-star ratings and allows for custom fractional values, making it versatile for applications that need detailed rating capabilities. The component handles fractional ratings smoothly, providing a polished user experience.
react-rating-stars-component:
react-rating-stars-component supports fractional ratings, including half-star ratings, which allows for more precise user feedback. This feature is easy to implement and works seamlessly with the component's design.

Performance

react-rating:
react-rating is lightweight and performs well, with minimal impact on application load times. Its design allows for efficient rendering, making it suitable for both small and large applications.
react-simple-star-rating:
react-simple-star-rating is highly efficient, with a focus on minimal resource usage and quick rendering. Its simple design contributes to fast performance, making it ideal for applications that require quick load times.
react-star-ratings:
react-star-ratings is performant but may have slightly higher resource usage due to its feature-rich nature. However, it is still suitable for most applications, especially those that can benefit from its advanced features without significant performance trade-offs.
react-rating-stars-component:
react-rating-stars-component is optimized for performance, with a small bundle size and efficient rendering. It is designed to be fast and responsive, making it a good choice for applications where performance is a concern.

Ease of Integration

react-rating:
react-rating is easy to integrate into React applications, with clear documentation and examples. Its flexible API allows for quick setup and customization, making it developer-friendly.
react-simple-star-rating:
react-simple-star-rating is designed for quick and easy integration, with a minimalistic API and clear instructions. Its simplicity makes it accessible for developers of all skill levels.
react-star-ratings:
react-star-ratings provides detailed documentation and examples, making it easy to integrate into projects. Its more complex features may require a bit more time to fully utilize, but the integration process is generally smooth.
react-rating-stars-component:
react-rating-stars-component offers straightforward integration with a simple API and good documentation. It is easy to implement, making it a popular choice for developers looking for a quick solution.

Code Example

react-rating:

react-rating Example

import React from 'react';
import { Rating } from 'react-rating';

const Example = () => {
  const handleRatingChange = (value) => {
    console.log('Selected Rating:', value);
  };

  return (
    <Rating
      initialRating={3.5}
      onChange={handleRatingChange}
      fractions={2} // Allow half ratings
      emptySymbol="far fa-star"
      fullSymbol="fas fa-star"
      style={{ fontSize: '2rem', color: '#FFD700' }}
    />
  );
};

export default Example;

react-simple-star-rating:

react-simple-star-rating Example

import React, { useState } from 'react';
import { SimpleStarRating } from 'react-simple-star-rating';

const Example = () => {
  const [rating, setRating] = useState(0);

  const handleRatingChange = (newRating) => {
    setRating(newRating);
    console.log('Selected Rating:', newRating);
  };

  return (
    <div>
      <h2>Rate this!</h2>
      <SimpleStarRating
        onRatingChange={handleRatingChange}
        ratingValue={rating}
        size={30}
        allowHalf
      />
    </div>
  );
};

export default Example;

react-star-ratings:

react-star-ratings Example

import React, { useState } from 'react';
import StarRatings from 'react-star-ratings';

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

  const changeRating = (newRating) => {
    setRating(newRating);
    console.log('Selected Rating:', newRating);
  };

  return (
    <div>
      <h2>Rate this!</h2>
      <StarRatings
        rating={rating}
        starRatedColor="gold"
        starEmptyColor="lightgray"
        starDimension="30px"
        starSpacing="5px"
        changeRating={changeRating}
        numberOfStars={5}
        name="rating"
        isHalf
      />
    </div>
  );
};

export default Example;

react-rating-stars-component:

react-rating-stars-component Example

import React, { useState } from 'react';
import ReactStars from 'react-rating-stars-component';

const Example = () => {
  const [rating, setRating] = useState(0);

  const handleRatingChange = (newRating) => {
    setRating(newRating);
    console.log('Selected Rating:', newRating);
  };

  return (
    <div>
      <h2>Rate this!</h2>
      <ReactStars
        count={5}
        onChange={handleRatingChange}
        value={rating}
        size={30}
        activeColor="#ffd700"
        isHalf
      />
    </div>
  );
};

export default Example;

Properties

Property	Type	Default	Description
`start`	number	0	Range starting value (exclusive).
`stop`	number	5	Range stop value (inclusive).
`step`	number	1	Describes how many values each Symbol represents. For example, for a `start` value of 0, a `stop` value of 10 and a `step` of 2, we will end up with 5 Symbols, with each Symbol representing value increments of 2.
`fractions`	number	1	Number of equal subdivisions that can be selected as a rating in each Symbol. For example, for a `fractions` value of 2, you will be able to select a rating with a precision of down to half a Symbol. Must be >= 1
`initialRating`	number	0	The value that will be used as an initial rating. This is the old `initialRate`.
`placeholderRating`	number	0	If you do not define an `initialRating` value, you can use a placeholder rating. Visually, this will have the same result as if you had defined an `initialRating` value. If `initialRating` is set `placeholderRating` is not taken into account. This is the old `placeholderRate`
`readonly`	bool	false	Whether the rating can be modified or not.
`quiet`	bool	false	Whether to animate rate hovering or not.
`direction`	ltr or rtl	ltr	The direction of the rating element contents
`emptySymbol`	element or object or string or array	Style.empty	React element, inline style object, or classes applied to the rating symbols when empty. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old `empty`.
`fullSymbol`	element or object or string or array	Style.full	React element, inline style object, or classes applied to the rating symbols when full. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old `full`.
`placeholderSymbol`	element or object or string or array	Style.placeholder	React element, inline style object, or classes applied to the placeholder rating symbols. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old `placeholder`.

Property

Type

Default

Description

start

number

Range starting value (exclusive).

stop

number

Range stop value (inclusive).

step

number

Describes how many values each Symbol represents. For example, for a start value of 0, a stop value of 10 and a step of 2, we will end up with 5 Symbols, with each Symbol representing value increments of 2.

fractions

number

Number of equal subdivisions that can be selected as a rating in each Symbol. For example, for a fractions value of 2, you will be able to select a rating with a precision of down to half a Symbol. Must be >= 1

initialRating

number

The value that will be used as an initial rating. This is the old initialRate.

placeholderRating

number

If you do not define an initialRating value, you can use a placeholder rating. Visually, this will have the same result as if you had defined an initialRating value. If initialRating is set placeholderRating is not taken into account. This is the old placeholderRate

readonly

bool

false

Whether the rating can be modified or not.

quiet

bool

false

Whether to animate rate hovering or not.

direction

ltr or rtl

ltr

The direction of the rating element contents

emptySymbol

element or object or string or array

Style.empty

React element, inline style object, or classes applied to the rating symbols when empty. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old empty.

fullSymbol

element or object or string or array

Style.full

React element, inline style object, or classes applied to the rating symbols when full. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old full.

placeholderSymbol

element or object or string or array

Style.placeholder

React element, inline style object, or classes applied to the placeholder rating symbols. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old placeholder.

Callbacks

Callback	Type	Description
`onChange`	function (value) {}	Gets called with the `value` when a different value than the currently set is selected.
`onClick`	function (value) {}	Gets called with the `value` when a symbol is clicked. The value is equal to the value that corresponds to that part of the symbol.
`onHover`	function (value) {}	Gets called with the `value` when you hover over a symbol. The value is equal to the value that corresponds to that part of the symbol. Gets called in `quiet` mode too. When hover ends, gets called with no `value` (i.e. `undefined` as the value).

Callback

Type

Description

onChange

function (value) {}

Gets called with the value when a different value than the currently set is selected.

onClick

function (value) {}

Gets called with the value when a symbol is clicked. The value is equal to the value that corresponds to that part of the symbol.

onHover

function (value) {}

Gets called with the value when you hover over a symbol. The value is equal to the value that corresponds to that part of the symbol. Gets called in quiet mode too. When hover ends, gets called with no value (i.e. undefined as the value).

Customization

Fractional Ratings

Performance

Ease of Integration

Code Example

React Rating

Demo

Installation

Dependencies

Upgrade Warning

Usage

Properties

Callbacks

Deprecated Properties and Callbacks

License