1.0.4 • Published 1 year ago
react-ts-rating-star v1.0.4
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