[go: up one dir, main page]

react-simple-star-ratings

0.1.4 • Public • Published

React Simple Rating Package

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

NPM JavaScript Style Guide GitHub


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

Package Sidebar

Install

npm i react-simple-star-ratings

Weekly Downloads

1

Version

0.1.4

License

Apache-2.0

Unpacked Size

19.6 kB

Total Files

4

Last publish

Collaborators

  • surajpatil6088