@datascientest-developer/react-simple-star-rating
v5.1.12
Published
A simple react component for adding a star rating to your project.
Downloads
257
Maintainers
Readme
React Simple Rating
A simple react component for adding a star rating to your project.
Install
npm
npm i @datascientest-developer/react-simple-star-rating
Yarn
yarn add @datascientest-developer/react-simple-star-rating
Usage
import React, { useState } from 'react'
import { Rating } from '@datascientest-developer/react-simple-star-rating'
export function MyComponent() {
const [rating, setRating] = useState(0)
// Catch Rating value
const handleRating = (rate: number) => {
setRating(rate)
// other logic
}
// Optinal callback functions
const onPointerEnter = () => console.log('Enter')
const onPointerLeave = () => console.log('Leave')
const onPointerMove = (value: number, index: number) => console.log(value, index)
return (
<div className='App'>
<Rating
onClick={handleRating}
onPointerEnter={onPointerEnter}
onPointerLeave={onPointerLeave}
onPointerMove={onPointerMove}
/* Available Props */
/>
</div>
)
}
Reset Rating Value
import React, { useState } from 'react'
import { Rating } from '@datascientest-developer/react-simple-star-rating'
export function MyComponent() {
const [rating, setRating] = useState(0)
// Catch Rating value
const handleRating = (rate: number) => {
setRating(rate)
}
const handleReset = () => {
// Set the initial value
setRating(0)
}
return (
<div className='App'>
{/* set initial value */}
<Rating onClick={handleRating} initialValue={rating} />
<button onClick={handleReset}>reset</button>
</div>
)
}
Available Props
| Prop | Type | Options | Description | Default |
| -------------------- | ---------------- | -------- | --------------------------------------------------------- | :------------------------: |
| onClick
| function | Optional | callback with hover
, index
and event
values passed | -
|
| onPointerMove
| function | Optional | callback with hover
, index
and event
values passed | -
|
| onPointerEnter
| function | Optional | callback with event
passed | -
|
| onPointerLeave
| function | Optional | callback with event
passed | -
|
| initialValue
| number | Optional | Set initial value | 0
|
| iconsCount
| number | Optional | Number of the icons | 5
|
| readonly
| boolean | Optional | Readonly mode | false
|
| rtl
| boolean | Optional | RTL mode | false
|
| transition
| boolean | Optional | Adds a smooth transition effect on mouse hover | false
|
| allowFraction
| boolean | Optional | Enable a fractional icon (half icon) | false
|
| resetOnClick
| boolean | Optional | Resets value on click | false
|
| className
| string | Optional | Applied to the main
span | react-simple-star-rating
|
| style
| CSSProperties | Optional | Inline style applied to the main
span | basic style
|
| size
| number | Optional | SVG Icon width / height in px
| 25
|
| SVGstrokeColor
| string | Optional | SVG Icon stroke color | currentColor
|
| SVGstrokeWidth
| string | number | Optional | SVG Icon storke width | 0
|
| SVGclassName
| string | Optional | SVG Icon css class | star-svg
|
| SVGstyle
| CSSProperties | Optional | SVG inline style | -
|
| fillIcon
| ReactNode | Optional | Custom fill icon SVG | null
|
| fillColor
| string | Optional | Fill icons color | #f1a545
|
| fillColorArray
| array | Optional | Array of string to add color range | []
|
| fillStyle
| CSSProperties | Optional | Inline style applied to filled
icon span | basic style
|
| fillClassName
| string | Optional | Applied to the filled
icon span | filled-icons
|
| emptyIcon
| ReactNode | Optional | Custom empty icon SVG | null
|
| emptyColor
| string | Optional | Empty icons color | #cccccc
|
| emptyStyle
| CSSProperties | Optional | Inline style applied to empty
icon span | basic style
|
| emptyClassName
| string | Optional | Applied to the empty
icon span | empty-icons
|
| customIcons
| array of object | Optional | Add a group of icons | []
|
| allowHover
| boolean | Optional | Enable / Disable hover effect | true
|
| disableFillHover
| boolean | Optional | Enable / Disable hover effect on filled stars | false
|
| allowTitleTag
| boolean | Optional | Enable / Disable HTMLtitle
Tag | true
|
| showTooltip
| boolean | Optional | Show a tooltip with live values | false
|
| tooltipDefaultText
| string | Optional | Initial tooltip text if no rating value | Your Rate
|
| tooltipArray
| array | Optional | Array of strings to show inside tooltip | []
|
| tooltipClassName
| string | Optional | Tooltip CSS class | rating-tooltip
|
| tooltipStyle
| CSSProperties | Optional | Inline style applied to the tooltip
span | basic style
|
| titleSeparator
| string | Optional | Separator word in a title of a rating star (1 out of 5)
| out of
|
BREAKING CHANGES: version 4.1.0 (2022-10-03)
| old | new | changes |
| --------------- | --------------- | --------- |
| allowHalfIcon
| allowFraction
| Renamed
|
| fullIcon
| fillIcon
| Renamed
|
| fullStyle
| fillStyle
| Renamed
|
| fullClassName
| fillClassName
| Renamed
|
| ratingValue
| -
| Removed
|
Demos
See all demos and usage examples in action.
License
MIT © awran5