React Rating

React Rating is a React rating component built with StyledComponents 💅 and inspired by ReactRating.

Installation

You can install @prontopro/react-rating component using the yarn package manager:

yarn add @prontopro/react-rating

Dependencies

The @prontopro/react-rating component peer depends on the React library.

You can install React using yarn:

yarn add --save react react-dom

Usage

Import Rating Component

import Rating from '@prontopro/react-rating'

Start using it:

<Rating />

Pass some config props:

<Rating
  animateOnHover
  disableAnimation
  initialRate={3}
  stop={10}
/>

Properties

Property	Type	Default	Description
animateOnHover	Boolean	false	Whether to animate rate hovering or not.
disableAnimation	Boolean	false	Disable stars animation onClick or onHover.
emptyRate	React Element	Empty Star	React Element
fractions	Number	1	Number of equal parts that make up a whole symbol.
fullRate	React Element	Full Star	React element
initialRate	Number	0	Initial rate value.
readonly	Boolean	false	Whether the rating can be modified or not.
start	Number	0	Range starting value.
step	Number	1	Step increment (must be between start and stop).
stop	Number	5	Range stop value.

Callbacks

Callback	Type	Parameters	Description
onChange	Function	rate: Number	Called when the selected rate is changed.
onClick	Function	(rate: Number, event: Event)	Called when a rate is clicked.
onRate	Function	rate: Number or undefined	Called when a rate is entered or left. When a rate is left it is called with undefined.

License

MIT License