AggregateRating

The AggregateRating component displays the average rating of a product based on other shoppers' feedback and reviews. AggregateRating supports both Unicode symbols and glyph icons from popular toolkits, such as Font Awesome.

Import

import { AggregateRating } from '@faststore/ui'

Usage

React

Loading...

CSS

[data-fs-aggregate-rating] {
  display: flex;
}

[data-fs-aggregate-rating] svg[data-fs-aggregate-rating-item] {
  width: 1.5rem;
  margin-right: 0.5rem;
}

li[data-fs-aggregate-rating-item] {
  color: #ffb100;
}

Customization

React

Loading...

CSS

[data-fs-aggregate-rating] {
  display: flex;
}

[data-fs-aggregate-rating] svg[data-fs-aggregate-rating-item] {
  width: 1.5rem;
  margin-right: 0.5rem;
}

/* Unicode symbols */
li[data-fs-aggregate-rating-item] {
  color: #ff6d75;
}

/* Unicode symbols with CSS */
span[data-fs-aggregate-rating-item] {
  color: #ffb100;
}

[data-fs-aggregate-rating] span[data-fs-aggregate-rating-item="full"]:after,
[data-fs-aggregate-rating] span[data-fs-aggregate-rating-item="partial"]:after {
  content: "★";
  display: block;
}

[data-fs-aggregate-rating] span[data-fs-aggregate-rating-item="empty"]:after {
  content: "☆";
  display: block;
}

Rating precision

AggregateRating uses a precision of 0.5 and rounds down any float number given by the value prop.

Loading...

Props

Customization

data-fs-aggregate-rating

data-aggregate-rating-item=(full|partial|empty)