Pillar UI React Rating Component documentation

Props

Rating

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

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

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.

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.

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.

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.