Components

Star Rating(React)

Display a star rating out of 5.0.

Version:0.7.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react --exact
Import:import { StarRating } from '@thumbtack/thumbprint-react';

Basic examples

Sizes

<React.Fragment>
    <div>
        <StarRating rating={0} />
    </div>
    <div>
        <StarRating rating={2.5} />
    </div>
    <div>
        <StarRating rating={5} />
    </div>
    <div>
        <StarRating rating={0} size="medium" />
    </div>
    <div>
        <StarRating rating={2.5} size="medium" />
    </div>
    <div>
        <StarRating rating={5} size="medium" />
    </div>
    <div>
        <StarRating rating={0} size="large" />
    </div>
    <div>
        <StarRating rating={2.5} size="large" />
    </div>
    <div>
        <StarRating rating={5} size="large" />
    </div>
</React.Fragment>

StarRating with inline text

13 reviews
<div className="flex">
    <StarRating rating={2.7} size="large" />
    <span className="ml3 b">13 reviews</span>
</div>

Event listeners

<StarRating
    size="large"
    rating={3}
    hoverRating={2}
    onStarClick={value => {
        console.log(`StarRating: Clicked on ${value}`);
    }}
    onStarHover={value => {
        console.log(`StarRating: Hovered over ${value}`);
    }}
    onMouseLeave={() => {
        console.log('StarRating: onMouseLeave');
    }}
/>

Props

StarRating

  • rating
    required

    Number from 0-5 at increments of 0.5. Numbers between these steps will be rounded.

    Type
    number
  • hoverRating

    Number from 0-5 at increments of 1. hoverRating trumps rating with respect to star highlighting.

    Type
    number
    Default
    0
  • size

    The size of the component when rendered

    Type
    oneOf([
      'small',
      'medium',
      'large',
    ]);
    Default
    'small'
  • onStarClick

    Function that is called when a user clicks on a star. The function is supplied a single parameter: the index of the clicked star.

    Type
    func
    Default
    noop
  • onStarHover

    Function that is called when a user hovers over a star. The function is supplied a single parameter: the index of the hovered star.

    Type
    func
    Default
    noop
  • onMouseLeave

    Function that is called when a user mouses away from the StarRating component

    Type
    func
    Default
    noop