Components

Star Rating(React)

Display a star rating out of 5.0.

Version:	`14.18.2` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
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>

<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>

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

Event listeners

The hoverRating, onStarClick, onStarHover, and onMouseLeave props make it possible to build an interactive StarRating component.

function StarRatingExample() {
    const [rating, setRating] = React.useState(3);
    const [hoverRating, setHoverRating] = React.useState(undefined);

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

function StarRatingExample() {
    const [rating, setRating] = React.useState(3);
    const [hoverRating, setHoverRating] = React.useState(undefined);
    return (
        <StarRating
            size="large"
            rating={rating}
            hoverRating={hoverRating}
            onStarClick={value => {
                setRating(value);
                console.log(`StarRating: Clicked on ${value}`);
            }}
            onStarHover={value => {
                setHoverRating(value);
                console.log(`StarRating: Hovered over ${value}`);
            }}
            onMouseLeave={() => {
                setHoverRating(undefined);
                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
This prop can be one of the following 6 types:
0
1
2
3
4
5
Default
0
size
The size of the component when rendered
Type
This prop can be one of the following 3 types:
'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 value of the clicked star.
Type
(value: number) => void
Default
noop
onStarHover
Function that is called when a user hovers over a star. The function is supplied a single parameter?: the value of the hovered star.
Type
(value: number) => void
Default
noop
onMouseLeave
Function that is called when a user mouses away from the StarRating component
Type
() => void
Default
noop

Star Rating(React)

Basic examples

Sizes

StarRating with inline text

Event listeners

Props

StarRating

`StarRating` with inline text