React Simple Rating Package

A simple npm package for Different Types of Rating to your project.

Install

• 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*/ />

Usage

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;

Available Props

| 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 |

Demo

React Simple Star Ratings.

License

Apache License 2.0 © SURAJPATIL6088