React Star Rating Component

A super simple, tiny, customizable star rating React component that installs no additional dependencies, has a total size of 11KB and has Typescript support.

Working examples can be found here Star Rating Examples

How to use

Requirements:

React >= 16.8.0

Install:

On the command line navigate to the project root and enter

npm install star-rating-react-ts

Import:

import {StarRating} from 'star-rating-react-ts'

JSX:

<YourComponent>
    <StarRating/>
</YourComponent>

Props

| prop name | type | default | optional | description | |---------------|-------------|-----------|----------|------------------------------------------------------------------------------------------| | numStars | number | 5 | true | number of stars to display | | initialRating | number | 0 | true | initial rating value | | readOnly | boolean | false | true | ignore user interaction | | theme | object | see below | true | styling options | | onClick | function | undefined | true | called when the user clicks a star, receives the new star rating as an argument (number) | | icon | JSX.Element | undefined | true | a custom SVG icon imported as a React Component |

Theming

Schema and default values for the theme prop object (all properties are optional):

{
    colors: {
        backgroundDefault: 'lightgray',
        backgroundColorActive: '#D8A127',
        backgroundColorHover: '#275ed8'
        }
    },
    size: 50
}

Custom Icons

By default the star rating component displays a star icon SVG. To use a custom icon in the star rating:

1. The SVG needs to be imported as a React Component. The easiest option is to use SVGR. Create React App includes SVGR under the hood. Vite publishes a simple SVGR plugin that can be installed in your project. In the following example it is assumed that the SVG icon file is in an assets folder in the src folder within the project root:

App.tsx

// Using Create React App
import { ReactComponent as BoneIcon } from './assets/bone.svg';

// Using the SVGR plugin for Vite
import BoneIcon from "./assets/bone.svg?react";

function App () {
    ...
    return <StarRating icon={<BoneIcon/>}/> // <-- pass custom icon as a component!
}

2. In the SVG image file, add the following fill & width attributes to the opening <svg> tag to ensure the theme colors and size props are inherited.

bone.svg

<svg xmlns="http://www.w3.org/2000/svg"
     fill="currentColor"
     width="100%"
...
</svg>

Accessibility

In addition to standard mouse and touch events this component is designed to be compatible with assistive technology (ie screen readers) and keyboard navigation. We use Axe Dev Tools to test for accessibility.