Star rating

Star Ratings are used for displaying a score within a given range.

Default

By default, star ratings are shown in a static form. They're available in two sizes and can be set at half star intervals.

Open in Storybook

Interactive

This version allows users to leave feedback on a given feature or area by setting a rating.

Open in Storybook

bpk-component-star-rating

Backpack rating star component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkStarRating, {
                                                  BpkStar,
                                                  STAR_TYPES,
                                                  BpkInteractiveStarRating,
                                                  withInteractiveStarRatingState
                                                } from '@skyscanner/backpack-web/bpk-component-star-rating';
                                                
                                                const InteractiveStarRating = withInteractiveStarRatingState(BpkInteractiveStarRating);
                                                
                                                export default () => (
                                                  <div>
                                                    <BpkStar
                                                      type={STAR_TYPES.HALF}
                                                    />
                                                    <BpkStarRating
                                                      rating={3.5}
                                                      large
                                                      ratingLabel={(rating, maxRating) => `Rated ${rating} out of ${maxRating} stars`}
                                                    />
                                                    <InteractiveStarRating
                                                      id="large-star-rating"
                                                      onRatingSelect={(rating) => console.log(rating)}
                                                      getStarLabel={(rating, maxRating) => `${rating} out of ${maxRating} stars`}
                                                    />
                                                  </div>
                                                );

Props

Check out the full list of props on Skyscanner's design system documentation website.

Props

Open in Storybook