package: '@thumbtack/tp-ui-react-star-rating' kit: component/star-rating.yaml platform: react

url: /api/components/component/star-rating/react/

import '@thumbtack/thumbprint-atomic';

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

<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');
    }}
/>

Changelog

Unreleased

3.0.6 - 2018-12-03

Changed

• [Patch] Upgrade to latest version of eslint.

3.0.5 - 2018-11-27

Changed

• [Patch] Publish package to public NPM.

3.0.4 - 2018-10-22

Changed

• [Patch] Convert to use MDX for documentation. (#1251)

3.0.3 - 2018-10-03

Changed

• [Patch] Only show title text when the star rating is not clickable. (#894)

3.0.2 - 2018-09-12

Changed

• [Patch] Upgrade version of Prettier and Thumbprint Tokens.

3.0.1 - 2018-08-17

Changed

• [Patch] Use camelCase classes in CSS modules.

3.0.0 - 2018-08-10

Changed

• [Major] Add hoverRating, onStarHover, and onMouseLeave props. Previous hover functionality must now be supported manually via these props.

2.0.0 - 2018-05-16

Changed

• [Major] Use CSS modules instead of styled-components. (#864)

1.0.3 - 2018-05-08

Fixed

• [Patch] Use import * as syntax for Thumbprint Tokens. (#884)

1.0.2 - 2018-05-04

Changed

• [Patch] Use newest version of Thumbprint Tokens for tree-shaking support. (#777)

1.0.1 - 2018-04-19

Changed

• [Patch] Fix mistake where CommonJS package was published as ES module. (#822)

1.0.0 - 2018-04-16

Changed

• [Patch] Use latest version of Thumbprint Tokens.

Fixed

• [Major] Remove extra spacing below the star rating caused by inline-block on the svgs and display:flex on the wrapping divs. This removes ~7px of bottom margin. (#582)

0.4.5 - 2018-04-13

Changed

• [Patch] Publish package as CommonJS and ES module.

0.4.4 - 2018-04-09

Fixed

• [Patch] Fix cursor when StarRating is a descendant of a clickable element (#631)
• [Patch] Fix unrounded numbers in tooltip text from title attributes (#641)
• [Patch] Fix half star alignment (#647)

0.4.3 - 2018-02-14

Fixed

• [Patch] Document props for the default export, not a subcomponent. (#579)

0.4.2 - 2018-02-07

Changed

• [Patch] Use latest version of Thumbprint Tokens.

0.4.1 - 2018-01-30

Changed

• [Patch] Add support for styled-components ^3.0.0 to peer dependencies.

0.4.0 - 2018-01-16

Changed

• [Minor] Use latest version of Thumbprint Tokens. This includes new brand colors.

0.3.4 - 2018-01-11

Changed

• [Patch] Update npm latest tag since it was accidentally pointed to a prepublish version of our components.

0.3.3 - 2017-12-18

Changed

• [Patch] Increase click target of stars when onClick is provided. (#552)

0.3.2 - 2017-12-11

Changed

• [Patch] Run babel-plugin-styled-components before publishing component.

0.3.1 - 2017-12-05

Changed

• [Patch] Use style attribute instead of styled-components to set the amount of gold stars. (#504)

0.3.0 - 2017-11-30

Added

• [Minor] Add onStarClick prop and that's triggered when a star is clicked.

0.2.7 - 2017-11-21

Changed

• [Patch] Rewrite documentation with Gatsby.
• [Patch] Use Prettier to format files.

0.2.6 - 2017-11-16

Changed

• [Patch] Change peerDependencies to include React 16.

0.2.5 - 2017-11-01

Changed

• [Major] Move styled-components from dependencies to peerDependencies.

0.2.4 - 2017-10-31

Changed

• [Patch] Update @thumbtack/thumbprint-tokens to version 4.0.1.

0.2.3 - 2017-10-04

Changed

• [Patch] Use latest version of thumbprint-tokens.

0.2.2 - 2017-10-02

Fixed

• [Patch] Change how we import component in Jest to avoid a bizarre Jest bug.

0.2.1 - 2017-08-16

Changed

• [Patch] Use lodash methods directly to decrease bundle size of consumers that do not support tree-shaking.

0.2.0 - 2017-08-04

Added

• [Minor] Add more size options for Avatar.

0.1.0 - 2017-08-02

Added

• [Minor] Create first version of tp-ui-react-star-rating.