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.
A simple yet powerful react component for adding a nice rating icons to your project.
Name | Description | Default |
---|---|---|
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 spanstring | "react-simple-star-rating" |
style | Inline style applied to the main spanCSSProperties | - |
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 spanCSSProperties | - |
fillClassName | Filled icons span classNamestring | "filled-icons" |
emptyIcon | Custom empty icon SVG ReactNode | - |
emptyColor | Empty icons color string | "#cccccc" |
emptyStyle | Inline style applied to empty-icons spanCSSProperties | - |
emptyClassName | ٌُEmpty icons span classNamestring | "empty-icons" |
allowTitleTag | Enable / Disable HTML title Tagboolean | 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 spanCSSProperties | - |
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 | - |
stories/Introduction.stories.mdx