Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-rating with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactRating = require("react-rating")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-rating v1.7.2

A rating react component with custom symbols

npm version

React Rating

React Rating is a react rating component which supports custom symbols both with inline styles and glyphicons found in popular CSS Toolkits like Fontawesome or Bootstrap.

This React component was inspired by the jQuery plugin bootstrap-rating.

Demo

See react-rating in action.

Installation

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

npm install --save react-rating

Dependencies

The react-rating component peer depends on the React library.

You can install React using npm too:

npm install --save react

Upgrade Warning

If you are using a version of React Rating < v1.0 be aware that there are API changes between anything < v1.0 and v1.0 . See the Properties and Deprecated Properties and Callbacks sections below for a documentation of the current API and how it compares to the old.

Usage

  1. Require the Rating Component

    var Rating = require('react-rating');
    
  2. Start using it

    With raw javascript:

    React.createElement(Rating)
    

    Or with JSX:

    <Rating />
    

Properties

PropertyTypeDefaultDescription
startnumber0Range starting value (exclusive).
stopnumber5Range stop value (inclusive).
stepnumber1Describes how many values each Symbol represents. For example, for a start value of 0, a stop value of 10 and a step of 2, we will end up with 5 Symbols, with each Symbol representing value increments of 2.
fractionsnumber1Number of equal subdivisions that can be selected as a rating in each Symbol. For example, for a fractions value of 2, you will be able to select a rating with a precision of down to half a Symbol. Must be >= 1
initialRatingnumber0The value that will be used as an initial rating. This is the old initialRate.
placeholderRatingnumber0If you do not define an initialRating value, you can use a placeholder rating. Visually, this will have the same result as if you had defined an initialRating value. If initialRating is set placeholderRating is not taken into account. This is the old placeholderRate
readonlyboolfalseWhether the rating can be modified or not.
quietboolfalseWhether to animate rate hovering or not.
directionltr or rtlltrThe direction of the rating element contents
emptySymbolelement or object or string or arrayStyle.emptyReact element, inline style object, or classes applied to the rating symbols when empty. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old empty.
fullSymbolelement or object or string or arrayStyle.fullReact element, inline style object, or classes applied to the rating symbols when full. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old full.
placeholderSymbolelement or object or string or arrayStyle.placeholderReact element, inline style object, or classes applied to the placeholder rating symbols. Can also be an array of such symbols that will be applied in a circular manner (round-robin). This is the old placeholder.

Callbacks

CallbackTypeDescription
onChangefunction (value) {}Gets called with the value when a different value than the currently set is selected.
onClickfunction (value) {}Gets called with the value when a symbol is clicked. The value is equal to the value that corresponds to that part of the symbol.
onHoverfunction (value) {}Gets called with the value when you hover over a symbol. The value is equal to the value that corresponds to that part of the symbol. Gets called in quiet mode too. When hover ends, gets called with no value (i.e. undefined as the value).

Deprecated Properties and Callbacks

This is a list of deprecated properties and callbacks from versions older than v1.0

  • onRate
  • initialRate
  • placeholderRate
  • empty
  • full
  • placeholder

License

MIT License

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free