A simple npm package for Different Types of Rating to your project.
- npm
npm i react-simple-star-ratings
- Import the package in your app:
import {StarRating} from 'react-simple-star-ratings';
- Get the Component from the package
<StarRating /*Availabe Props*//>
<TagStarRating /*Availabe Props*/ />
import React from 'react'
import {StarRating} from 'react-simple-star-ratings';
import './App.css'
function App() {
const starArray = [1, 2, 3, 4, 5];
const starArrayTag = [
{ st: 1, tag: "Terrible" },
{ st: 2, tag: "Bad" },
{ st: 3, tag: "Average" },
{ st: 4, tag: "Great" },
{ st: 5, tag: "Awesome" },
];
return (
<>
<h1>Star Rating in React</h1>
<StarRating tooltipArray={starArray} />
<TagStarRating
allowTitleTag={true}
tooltipDefaultText
tooltipArray={starArrayTag}
/>
// There are Different Types of React Components
// Availave in the Demo please Visit !!!
</>
)
}
export default App;
Prop | Type | Options | Description | Default |
---|---|---|---|---|
onClick |
function | Optional | callback with hover , index and event values passed |
- |
onMouseOver |
function | Optional | callback with event passed |
- |
onMouseLeave |
function | Optional | callback with event passed |
- |
initialValue |
number | Optional | Set initial value | 0 |
iconsCount |
number | Optional | Number of the icons | 5 |
transition |
boolean | Optional | Adds a smooth transition effect on mouse hover | 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 |
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 |
Apache License 2.0 © SURAJPATIL6088