Default

The rating component's appearance changes based on the value provided. The title can also be customised to pass through an image such as a partners rating logo or BpkStarRating .

Storybook failed to load.

Large rating

Storybook failed to load.

Title-only rating

The rating component can have just a title with no subtitle. Here it's seen in both horizontal and vertical styles.

Storybook failed to load.

Alternate scale

By default, ratings follow a 0-5 scale. Set the ratingScale prop to use a 0-10 scale instead.

The 0-10 scale should only be used in specific circumstances, like ratings coming from an external provider that use a 0-10 scale. Most things should use the 0-5 scale to give users consistency.

Storybook failed to load.

bpk-component-rating

Backpack rating component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkRating, { RATING_SIZES, RATING_SCALES } from '@skyscanner/backpack-web/bpk-component-rating';
                                                
                                                export default () => (
                                                  <BpkRating
                                                    ariaLabel="4.8 Excellent 2,420 reviews"
                                                    value={4.8}
                                                    title="Excellent"
                                                    subtitle="2,420 reviews"
                                                  />
                                                
                                                  // Large size rating
                                                  <BpkRating
                                                    ariaLabel="4.4 Very good 120 reviews"
                                                    title="Very good"
                                                    subtitle="120 reviews"
                                                    size={RATING_SIZES.large}
                                                    value={4.4}
                                                  />
                                                
                                                  // Title only rating
                                                  <BpkRating
                                                    ariaLabel="2.3 Bad"
                                                    title="Bad"
                                                    value={2.3}
                                                  />
                                                
                                                  // Subtitle only rating
                                                  <BpkRating
                                                    ariaLabel="4.8 2,420 reviews"
                                                    value={4.8}
                                                    subtitle="2,420 reviews"
                                                  />
                                                
                                                  // Show scale rating
                                                  <BpkRating
                                                    ariaLabel="3.8 Good 530 reviews"
                                                    title="Good"
                                                    subtitle="530 reviews"
                                                    value={3.8}
                                                  />
                                                
                                                  // Hide scale rating
                                                  <BpkRating
                                                    ariaLabel="3.8 Good 530 reviews"
                                                    title="Good"
                                                    subtitle="530 reviews"
                                                    value={3.8}
                                                    showScale={false}
                                                  />
                                                
                                                  // 0-10 scale
                                                  <BpkRating
                                                    ariaLabel="9.9 Awesome 6,549 reviews"
                                                    title="Awesome"
                                                    subtitle="6,549 reviews"
                                                    value={9.9}
                                                    ratingScale={RATING_SCALES.zeroToTen}
                                                  />
                                                
                                                  // With a React Node element as the title
                                                  <BpkRating
                                                    ariaLabel="3 Average 1,230 reviews"
                                                    value={3}
                                                    title={
                                                      <BpkStarRating
                                                        rating={3}
                                                        ratingLabel={(rating: number, maxRating: number) =>
                                                          `Rated ${rating} out of ${maxRating} stars`
                                                        }
                                                      />
                                                    }
                                                    subtitle="1,230 reviews"
                                                  />
                                                );

Props

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

Props

Storybook failed to load.