No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

React simple star rating

A simple yet powerful react component for adding a nice rating icons to your project.

NPM JavaScript Style Guidenpm bundle sizeGitHub


Install with npm
npm i react-simple-star-rating
Yarn
yarn add react-simple-star-rating
Usage
import React, { useState } from 'react' import { Rating } from 'react-simple-star-rating' function App() { const [ratingValue, setRatingValue] = useState(0) const handleRating = (rate: number) => { setRatingValue(rate) } return ( <Rating onClick={handleRating} {/* props */} /> )
Reset Rating Value
import React, { useState } from 'react' import { Rating } from 'react-simple-star-rating' function App() { const [ratingValue, setRatingValue] = useState(0) const handleRating = (rate: number) => { setRatingValue(rate) } const handleReset = () => { // Set the initial value setRating(0) } return ( <> {/* set initial value */} <Rating onClick={handleRating} initialValue={ratingValue} /> <button onClick={handleReset}>reset</button> </> )

Props

NameDescriptionDefault
onClick
Handles the returned rating value
((value: number, index: number, event?: MouseEvent<HTMLSpanElement, MouseEvent>) => void)
-
onPointerMove
onPointerMove callback function with hover, index alongside event values passed
((value: number, index: number, event: PointerEvent<HTMLSpanElement>) => void)
-
onPointerEnter
onPointerEnter callback function
((event: PointerEvent<HTMLSpanElement>) => void)
-
onPointerLeave
onPointerLeave callback function
((event: PointerEvent<HTMLSpanElement>) => void)
-
initialValue
Set initial value
number
0
iconsCount
Number of the icons
number
5
readonly
Read only mode
boolean
false
customIcons
Add a group of icons
{ icon: ReactNode; }[]
[]
rtl
RTL mode
boolean
false
allowFraction
Enable a fractional rate (half icon)
boolean
false
allowHover
Enable / Disable hover effect on empty icons
boolean
true
disableFillHover
Enable / Disable hover effect on filled icons
boolean
false
transition
Enable / Disable transition effect on mouse hover
boolean
false
className
Applied to the main span
string
"react-simple-star-rating"
style
Inline style applied to the main span
CSSProperties
-
fillIcon
Custom fill icon SVG
ReactNode
-
fillColor
Filled icons color
string
"#ffbc0b"
fillColorArray
Array of string to add color range
string[]
[]
fillStyle
Inline style applied to filled-icons icon span
CSSProperties
-
fillClassName
Filled icons span className
string
"filled-icons"
emptyIcon
Custom empty icon SVG
ReactNode
-
emptyColor
Empty icons color
string
"#cccccc"
emptyStyle
Inline style applied to empty-icons span
CSSProperties
-
emptyClassName
ٌُEmpty icons span className
string
"empty-icons"
allowTitleTag
Enable / Disable HTMLtitle Tag
boolean
true
showTooltip
Show a tooltip with live values
boolean
false
tooltipDefaultText
Initial tooltip text if there is no rating value
string
"Your Rate"
tooltipArray
Array of strings that will show inside the tooltip
string[]
[]
tooltipStyle
Inline style applied to the tooltip span
CSSProperties
-
tooltipClassName
Tooltip CSS className
string
"react-simple-star-rating-tooltip"
titleSeparator
Separator word in a title of a rating star (1 out of 5)
string
"out of"
size
Icon width / height in px
number
40
SVGstrokeColor
string
"currentColor"
SVGstorkeWidth
stringnumber
0
SVGclassName
string
"star-svg"
SVGstyle
CSSProperties
-

License MIT © awran5
TipEdit the Markdown in stories/Introduction.stories.mdx