React Simple Rating

A simple react component for adding a star rating to your project.

Install

npm

npm i react-simple-star-rating

Yarn

yarn add react-simple-star-rating

Usage

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

export default function MyComponent() {
  const [rating, setRating] = useState(0) // initial rating value

  // Catch Rating value
  const handleRating = (rate: number) => {
    setRating(rate)
    // other logic
  }

  return (
    <div className='App'>
      <Rating onClick={handleRating} ratingValue={rating} /* Available Props */ />
    </div>
  )
}

Available Props

Prop	Type	Options	Description	Default
ratingValue	number	Required	Rating value passed from the Rating component	-
onClick	function	Optional	Handles the returned rating value	-
initialValue	number	Optional	Set initial value (needed to reset the value)	0
iconsCount	number	Optional	Number of the icons	5
size	number	Optional	Icon width / height in px	25
readonly	boolean	Optional	Readonly mode	false
fillColor	string	Optional	Full icons color	#f1a545
fillColorArray	array	Optional	Array of string to add color range	[]
emptyColor	string	Optional	Empty icons color	#cccccc
fullIcon	ReactElement	Optional	Custom full icon SVG	null
emptyIcon	ReactElement	Optional	Custom empty icon SVG	null
customIcons	array of object	Optional	Add a group of icons	[]
rtl	boolean	Optional	RTL mode	false
allowHalfIcon	boolean	Optional	Enable a fractional icon (half icon)	false
allowHover	boolean	Optional	Enable / Disable hover effect	true
transition	boolean	Optional	Adds a transition effect on mouse hover	false
className	string	Optional	Applied to the main span	react-simple-star-rating
style	CSSProperties	Optional	Inline style applied to the main span	basic style
fullClassName	string	Optional	Applied to the filled icon span	filled-icons
emptyClassName	string	Optional	Applied to the empty icon span	empty-icons
fullStyle	CSSProperties	Optional	Inline style applied to filled icon span	basic style
emptyStyle	CSSProperties	Optional	Inline style applied to empty icon span	basic style
showTooltip	string	Optional	Show a tooltip with live values	false
tooltipDefaultText	string	Optional	Initial tooltip text if no rating value	Your Rate
tooltipArray	array	Optional	Array of strings to show inside tooltip	[]
tooltipClassName	string	Optional	Tooltip CSS class	rating-tooltip
tooltipStyle	CSSProperties	Optional	Inline style applied to the tooltip span	basic style

---

Migrate to v4

1. Old props changes

old	new	changes
stars	iconsCount	Renamed
children	inline props	Removed

2. Remove RatingView Component, now you can use readonly prop instead

3. Custom SVG, You can use your own SVG now as a inline props fullIcon | emptyIcon | customIcons. See all available props above

Demos

See all demos and usage examples in action.

License

MIT © awran5