Constructor
# <ReviewRating value canShowEmptyRating size activeColor inActiveColor count showHalfStar className activeSymbol inActiveSymbol halfActiveSymbol />
This component takes in the value for rating and renders star for the value passed in. This comopent is generally used for story review type.
Example
import { ReviewRating } from '@quintype/components';
<ReviewRating value="3" />
The component supports additional props which allows more customization, you can pass in props like size, color, count of stars or even change the render from star to a custom svg component. Refer to component src to know exact details of what is supported.
PropTypes:
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
value |
number | Yes | Rating value to be displayed | |
canShowEmptyRating |
bool | No | Can show Empty rating | false |
size |
number | No | Size of the icon (star) | 20 |
activeColor |
string | No | Active color | "gold" |
inActiveColor |
string | No | Inactive/ disabled stars color | "gray" |
count |
number | No | Number of stars to render | 5 |
showHalfStar |
bool | No | Show half stars | true |
className |
string | No | Classname for the containing div | "review-rating" |
activeSymbol |
element | No | Optional React component to render instead of active star | null |
inActiveSymbol |
element | No | Optional React component to render instead of inactive star | null |
halfActiveSymbol |
element | No | Optional React component to render instead of half active star | null |