Star Reviews

The Star Reviews component displays a block of text consisting of a rating and a number of reviews (See Example below).

Directions

Copy the component below and paste it into content section of your BP Post in Hygraph.
Update the ratings array with the ratings you want to display.
Each rating object has the following properties:
- rating: The rating value.
- imgSrc: The image source for the rating.
- reviews: The number of reviews.
- height: The height of the image.
- width: The width of the image.

 <StarRating ratings={[
    { 
      rating: 4.5, 
      imgSrc: "https://us-west-2.graphassets.com/AalLHDRueT6SDLkGLppQVz/cm9ivig4dpt4g07n83a2d9k5m", 
      reviews: 4,
      height: 80,
      width: 80,
      imageClassName: "w-10 h-10" 
    },
    { 
      rating: 4.8, 
      imgSrc: "https://us-west-2.graphassets.com/AalLHDRueT6SDLkGLppQVz/cm9ivig9vq2q208lfn0myyfzh", 
      reviews: 12,
      height: 60,
      width: 120,
      imageClassName: "w-32 h-auto"
    },
    { 
      rating: 4.2, 
      imgSrc: "https://us-west-2.graphassets.com/AalLHDRueT6SDLkGLppQVz/cm9ivig4lpt4l07n86wujs5dj", 
      reviews: 8,
      height: 70,
      width: 200,
      imageClassName: "w-42 h-auto"
    }
  ]} />

Directions​

Directions