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

StarRating with inline text

13 reviews

Event listeners

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

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