StarRating

Storybook
GitHub

Displays a visual rating of a product and optionally allows users to rate the product themselves.

Usage

import StarRating from '@nerdwallet/react-star-rating';
<StarRating rating="3" />
import { StarRatingInput } from '@nerdwallet/react-star-rating';
<StarRatingInput
id="example"
nerdwallet
rating={value}
onChange={handleChange}
/>

Loading examples...

<StarRating>

className

string

Class on the outer container element.

Default

null

label

string

Label for the stars.

Default

null

maxRating

number

Maximum star rating.

Default

5

nerdwallet

boolean

Whether this is a "NerdWallet" rating, making the stars green.

Default

false

rating

number

Current star rating.

Default

0

ratingLabels

Object | boolean

Object mapping each rating value to its label or a flag indicating to hide the rating labels.

{
[key]: string
} | bool

Default

DEFAULT_RATING_LABELS

Maintainers

This component is maintained by the FEI team.

See Also