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.

Interactive

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

                                                
                                                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