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

import { 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:

@import '@faststore/ui/src/components/molecules/Rating/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

<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.
disabled	`false \| true`	Specifies that the actionable rating should be disabled.

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

<Rating value={3.5} icon={<Icon name="Star" />} />

Other Icon

<Rating value={3.8} icon={<Icon name="Heart" />} />

Actionable

const [rating, setRating] = useState(3)
<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-rating

data-fs-rating-button

data-fs-rating-icon-wrapper

data-fs-rating-icon-outline

data-fs-rating-item="empty" | "partial"

data-fs-rating-actionable="true"