rating-react

1.0.4 • Public • Published

npm version

Rating React

Rating React is an easy-to-use react rating component that allows the user to select a rating with stars, numbers or emojis, useful for reviews.

Demo

See react-rating in action.

Installation

You can install rating-react component using the npm package manager:

npm i rating-react

Dependencies

The react-rating component peer depends on the React library, the Prop-Types library and React-Icons library.

Install React using npm too:

npm i react

Install Prop-Types using npm too:

npm i prop-types

Install React-Icons using npm too:

npm i react-icons

Usage

  1. Install the library

    npm i rating-react
  2. Import the library into your component

    import Rating from "rating-react";
  3. Call it inside your component

    <Rating />

Properties

Prop Type Description Default
maxRating number Maximum number of icons for rating. 5
onRate function Callback function that is called when the user selects a rating. undefined
value number Rating value (if externally controlled). undefined
readOnly bool If set to true, do not allow user interaction. false
disabled bool If set to true, disables the component. false
size string Icon size. Options: "sm", "md", "lg". "md"
defaultColor string Color of inactive icons. "#ffc107"
activeColor string Color de los íconos activos. undefined
showNoRatingGiven bool Displays text if no rating has been given. false
disabledOpacity number Opacity of the component when disabled. 0.5
resettable bool Allows resetting the rating to 0. false
tooltip array of strings Tooltips to display when hovering over the icons. []
iconType string Type of icon to display. Options: "stars", "hearts", "thumbs", "faces". "stars"
ariaLabel string ARIA label for accessibility. "rating"
showValue bool Displays the current rating value. false

License

MIT License

Readme

Keywords

none

Package Sidebar

Install

npm i rating-react

Weekly Downloads

6

Version

1.0.4

License

MIT

Unpacked Size

22.7 kB

Total Files

6

Last publish

Collaborators

  • elthiagosm