React TS Rating Star

React TS Rating Star allows you to create a customizable rating star component with ease.

How to use

Requirements:

React >= 16.8.0

Installation:

On the command line navigate to the project root and enter:

npm install react-ts-rating-star
yarn add react-ts-rating-star

TSX:

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

// ...

<RatingStar />

Props

| Prop name | Type | Default | Optional | Description | | --------------- | --------------------------- | ---------- | -------- | --------------------------------------------------------- | | numberOfStars | number | 5 | true | The number of stars to display. | | averageRating | number | | true | The rate displayed before interacting with the component. | | iconColor | string | 'gold' | true | The color of the icons when active. | | backgroundColor | string | 'darkgray' | true | The background color of the icons (inactive icon.) | | iconWidth | string | '2em' | true | The width of the icons. | | iconHeight | string | '2em' | true | The height of the icons. | | iconHoverEffect | HoverEffect | 'none' | true | The effect on hover (see HoverEffect type below). | | onClick | (rating: number) => unknown | | true | Function called when the user clicks on a star. |

HoverEffect

Possible values of iconHoverEffect are the following:

'none'
'scaling'
'twinkling'
'rotating'
'animated-scaling'
'animated-twinkling'
'animated-rotating'

Example

import React from 'react'
import { RatingStar } from 'react-ts-rating-star'
import MyCustomIcon from './MyCustomIcon.tsx'

const ExampleRatingStar = () => {
  const getStarNumberClicked = (rating: number) => {
    console.log(`Rating: ${rating}`)
  }

  return (
    <RatingStar
      iconColor='#fdcb6e'
      backgroundColor='#dfe6e9'
      iconWidth='4em'
      iconHeight='4em'
      averageRating={3.81}
      iconHoverEffect='scaling'
      onClick={getStarNumberClicked}
    />
  )
}

export default ExampleRatingStar