Pillar UI React Rating Component documentation
The Rating component is used to display a user's rating of a product, service, or business.
Components:
Type
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.
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.