Rating Stars

The RatingStars component provides a dynamic and customizable way to display star-based ratings in your application. It allows users to interactively select or view ratings with options for different sizes, colors, and clickability. This component supports various configurations such as setting the maximum rating value, disabling interaction, and applying custom styles. Ideal for feedback systems or product reviews, RatingStars ensures a visually appealing and user-friendly experience while maintaining full flexibility for integration into any design system.

Rating Stars Installation

Basic Rating Stars

1<RatingStars
2  rating={0}
3  clickable={true}
4  onChange={(rating) => {}}
5  starColor="#F8CC38"
6/>

Rating Stars API Reference

Disabled Rating Stars

1<RatingStars
2  rating={4}
3  onChange={(rating) => {}}
4  starColor="#F8CC38"
5  disabled={true}
6/>

Rating Stars - Star Variable Size

1<RatingStars
2  rating={7}
3  onChange={(rating) => {}}
4  starColor="#F8CC38"
5  clickable={true}
6  maxRating={10}
7/>

Rating Stars - Sizes

1<RatingStars
2  rating={1}
3  clickable={true}
4  size="small"
5  onChange={(rating) => {}}
6  starColor="#F8CC38"
7/>
8<RatingStars
9  rating={3}
10  clickable={true}
11  size="default"
12  onChange={(rating) => {}}
13  starColor="#F8CC38"
14/>
15<RatingStars
16  rating={5}
17  clickable={true}
18  size="large"
19  onChange={(rating) => {}}
20  starColor="#F8CC38"
21/>