Rating
Displays a product rating based on other shoppers' feedback.
The
Rating component displays the average rating of a product based on other shoppers' feedback and reviews. Rating supports icons from our components.Overview
Example
Code
Readonly
Actionable
Import
Import the component from @faststore/ui
_10import { Rating } from '@faststore/ui'
Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@import '@faststore/ui/src/components/molecules/Rating/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
_10<Rating value={3.5} icon={<Icon name="Star" />} />
Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-rating |
| length | number | The length of child elements. | 5 |
| value | number | The current value of the rating, based on the quantity of child elements. | 0 |
| icon | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Icon to represent the rating score unit (e.g.: a <Icon name="Star" /> component) | |
| onChange | (value: number) => void | Function to be triggered when Rating option change. This should only be used if you and an actionable rating list. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-rating-gap | var(--fs-spacing-0) |
--fs-rating-color | var(--fs-color-text) |
Nested Elements
Icon
| Local token | Default value/Global token linked |
|---|---|
--fs-rating-icon-width | var(--fs-spacing-3) |
--fs-rating-icon-height | var(--fs-rating-icon-width) |
Variants
Readonly
_10<Rating value={3.5} icon={<Icon name="Star" />} />
Other Icon
_10<Rating value={3.8} icon={<Icon name="Heart" />} />
Actionable
_10const [rating, setRating] = useState(3)_10<Rating value={rating} onChange={setRating} icon={<Icon name="Star" />} />
| Local token | Default value/Global token linked |
|---|---|
--fs-rating-actionable-gap | 0 |
--fs-rating-actionable-icon-width | var(--fs-rating-icon-width) |
--fs-rating-actionable-icon-height | var(--fs-rating-actionable-icon-width) |
Customization
For further customization, you can use the following data attributes:
data-fs-ratingdata-fs-rating-buttondata-fs-rating-icon-wrapperdata-fs-rating-icon-outlinedata-fs-rating-item="empty" | "partial"data-fs-rating-actionable="true"