React-five-star-rating NPM

React Five Star Rating

Simple React component that returns an array of STARS based on the input rating value(eg. 3.4)

Description

Steps to use the package.

Install the package from npm registry using the following command.

npm i react-five-star-rating

Import the StarRatings Component in your React component.

import StarRatings from 'react-five-star-rating';

Use the Star Rating component by passing a Decimal Rating value and a css/Tailwind classname with height and width values for a star

<StarRatings
      rating={2.8}          
      containerClassName="star-rating-container"                // CSS/Tailwind classnames for the star container, set height and width
      starFillColor="aqua"                                      // Optional - fill color for the stars, default color is gold
      startStrokeColor="grey"                                   // Optional - Stroke color surrounding the star. default color is black    
      concise                                                   // Optional - When true, shows only the necessary number of stars for rating  
    />

Star rating with default options

Optional props

containerStyle - style object for the star's wrapper
starClassName - css/Tailwind classname that applies to the star SVG
starStyle - style object for the star SVG
starFillColor - Fill color for the stars. Default color is gold
starStrokeColor - Stroke color for the stars. Default stroke color is black
starStrokeWidth - Stroke width for each star in pixels. Default is 0.5px
Concise - When true, shows only necessary number of stars required to display the rating (3 stars for a rating of 2.80). When false, five stars will be returned