⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Rating

The Rating component displays the average rating of a product based on other shoppers' feedback and reviews. Rating supports icons from our components.

Overview


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' @import
  '@faststore/ui/src/components/atoms/Button/styles.scss';

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


Usage

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

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-rating
lengthnumberThe length of child elements.5
valuenumberThe current value of the rating, based on the quantity of child elements.0
iconstring | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalIcon to represent the rating score unit (e.g.: a <Icon name="Star" /> component)
onChange(value: number) => voidFunction to be triggered when Rating option change. This should only be used if you and an actionable rating list.

Design Tokens

Local tokenDefault value/Global token linked
--fs-rating-gapvar(--fs-spacing-0)
--fs-rating-color
var(--fs-color-text)

Nested Elements

Icon

Local tokenDefault value/Global token linked
--fs-rating-icon-widthvar(--fs-spacing-3)
--fs-rating-icon-heightvar(--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 tokenDefault value/Global token linked
--fs-rating-actionable-gap0
--fs-rating-actionable-icon-widthvar(--fs-rating-icon-width)
--fs-rating-actionable-icon-heightvar(--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"