react-custom-rating-component

A fully customizable custom react rating component

Customizable react star ratings. It allows use of different precisions and supports custom icon like heart icon

npm install react-custom-rating-component

Or

yarn add react-custom-rating-component

Motivation

I wanted a star rating component that was highly customizable and could do half stars, and I wanted it to be declarative. I couldn't find one that I liked, so I made one.

Demo

Check out the playground with different use cases Play Ground

Take a look at react-custom-rating-component live example

Demo Example Image

Usage

import { Rating } from 'react-custom-rating-component'

const App = () => {
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        margin: '40px 20px',
      }}
    >
      <Rating
        defaultValue={2.5}
        size='30px'
        spacing='10px'
        activeColor='red'
        onChange={(newRating) => console.log('newRating', newRating)}
        onHover={(hoveredRating) => console.log('hoveredRating', hoveredRating)}
      />
    </div>
  )
}

All Props

Prop	Type	Default	Description
defaultValue	string	0	Required. This is the value of the rating displayed by default. Supply this if your rating is also a readOnly
precision	number	1	The value to increment rating when hovered or clicked
count	number	5	The number of Icons to display
shape	star or heart	star	This is the shape displayed as icon
onChange	function	-	This is the function that is called when the rating value changes
onHover	function	-	This is the function that is called when the rating Icon is hovered
className	string	''	classes passed to the parent component
readOnly	boolean	false	This sets the component to be non editable
size	string	24px	This defines the size of the Icons used
spacing	string	5px	This defines the fap between the Icons used
activeColor	string	orange	This is the color of the icon in the active state
defaultColor	string	gray	This is the color of the icon in the inactive state
titleArray	string[]	['Poor', 'Good', 'Very Good', 'Best', 'Excellent']	These are displayed as titles when icons are hovered
showTitle	boolean	false	This defines whether to display the titles or not

Browser Support

This library is supported by all the major browsers. If you find any issues please raise an issue on the repo and I will attend to it as soon as possible.

Contribute

If you have any ideas on how to make this library better, please feel free to contribute by raising a PR or an issue. I will be happy to review and merge.