Pillar UI React Rating Component documentation

The Rating component is used to display a user's rating of a product, service, or business.

Components:

Rating

Type

Components

import

import { Pillar UI React Rating Component } from '@pillar-ui/core'

Props

Rating

The rating prop determines the number of stars that the user has given the product, service, or business.

1 starfalse out of 5
2 stars out of 5
3 stars out of 5
4 stars out of 5
5 stars out of 5
export const Ratings = () => {
  return (
    <Flex direction="column" gap="md">
      <Rating rating={1} />
      <Rating rating={2} />
      <Rating rating={3} />
      <Rating rating={4} />
      <Rating rating={5} />
    </Flex>
  )
}

Size

  • Type: string
  • Default: md
  • Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop determines the size of the Rating component. It accepts the following values: 3xs 2xs xs sm md lg xl 2xl 3xl

4 stars out of 5
4 stars out of 5
4 stars out of 5
4 stars out of 5
4 stars out of 5
4 stars out of 5
4 stars out of 5
4 stars out of 5
4 stars out of 5
export const RatingSize = () => {
  return (
    <Flex direction="column" gap="md">
      <Rating rating={4} size="3xs" />
      <Rating rating={4} size="2xs" />
      <Rating rating={4} size="xs" />
      <Rating rating={4} size="sm" />
      <Rating rating={4} />
      <Rating rating={4} size="lg" />
      <Rating rating={4} size="xl" />
      <Rating rating={4} size="2xl" />
      <Rating rating={4} size="3xl" />
    </Flex>
  )
}

Color

  • Type: string
  • Default: primary
  • Options: danger | warning | success | primary | bg | primary | secondary

The color prop determines the color of the Rating component. It accepts a string representing a color name or a color value in hex, rgb, rgba format.

4 stars out of 5
4 stars out of 5
4 stars out of 5
4 stars out of 5
4 stars out of 5
4 stars out of 5
export const RatingColor = () => {
  return (
    <Flex direction="column" gap="md">
      <Rating color="dan" rating={4} />
      <Rating color="pri" rating={4} />
      <Rating color="sec" rating={4} />
      <Rating color="suc" rating={4} />
      <Rating color="war" rating={4} />
      <Rating color="bg" rating={4} />
    </Flex>
  )
}

Icon

The icon prop determines the icon that will be displayed next to the Rating component. It accepts a React function component that takes a color prop as an input.

4 stars out of 5
4 stars out of 5
export const RatingType = () => {
  return (
    <Flex direction="column" gap="md">
      <Rating icon="heart" rating={4} color="dan" />
      <Rating rating={4} />
    </Flex>
  )
}

Title

The title prop determines the title that will be displayed next to the Rating component.

4 stars out of 5
fake label
4 stars out of 5
export const RatingLabels = () => {
  return (
    <Flex direction="column" gap="md">
      <Rating rating={4} hideTitle />
      <Rating rating={4} title="fake label" />
      <Rating rating={4} />
    </Flex>
  )
}

Use Case

Ratings are often used to help users make informed decisions about what to buy, where to go, or what to do. They can also be used to track the progress of a user's experience with a product, service, or business.

Troubleshooting

Common issues when implementing the Rating component can include incorrect positioning, incorrect styling, or issues with accessibility. Troubleshooting these issues may involve inspecting the HTML and CSS, checking for errors in the code, and testing with different devices and browsers.

Conclusion

The Rating component is a useful UI element for displaying user ratings of products, services, or businesses. It can be implemented using HTML and CSS or with a UI framework or library. When implementing the Rating component, it's important to consider accessibility, TypeScript support, and troubleshooting common issues.