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

Require the Rating Component
```
var Rating = require('react-rating');
```
Start using it

With raw javascript:
```
React.createElement(Rating)
```
Or with JSX:
```
<Rating />
```

Properties

Property	Type	Default	Description
`start`	number	0	Range starting value (exclusive).
`stop`	number	5	Range stop value (inclusive).
`step`	number	1	Describes 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.
`fractions`	number	1	Number 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
`initialRating`	number	0	The value that will be used as an initial rating. This is the old `initialRate`.
`placeholderRating`	number	0	If 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`
`readonly`	bool	false	Whether the rating can be modified or not.
`quiet`	bool	false	Whether to animate rate hovering or not.
`direction`	ltr or rtl	ltr	The direction of the rating element contents
`emptySymbol`	element or object or string or array	Style.empty	React 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`.
`fullSymbol`	element or object or string or array	Style.full	React 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`.
`placeholderSymbol`	element or object or string or array	Style.placeholder	React 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

Callback	Type	Description
`onChange`	function (value) {}	Gets called with the `value` when a different value than the currently set is selected.
`onClick`	function (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.
`onHover`	function (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

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Signoz	13,040			11 hours ago			673	other	TypeScript
SigNoz is an open-source APM. It helps developers monitor their applications & troubleshoot problems, an open-source alternative to DataDog, NewRelic, etc. 🔥 🖥. 👉 Open source Application Performance Monitoring (APM) & Observability tool
React Native Star Rating	735	220	36	2 years ago	11	September 10, 2018	48		JavaScript
A React Native component for generating and displaying interactive star ratings
React Native In App Review	514			3 months ago	44	April 16, 2022	19	mit	JavaScript
The Google Play In-App Review API, App store rating API lets you prompt users to submit Play Store or App store ratings and reviews without the inconvenience of leaving your app or game.
React Form Builder	513			6 years ago	3	November 18, 2016	26	mit	JavaScript
A complete react form builder that interfaces with a json endpoint to load and save generated forms. The toolbox contains 16 items for gathering data. Everything from star ratings to signature boxes!
React Rating	476	234	55	a year ago	63	March 25, 2020	17	mit	JavaScript
A rating react component with custom symbols.
React Star Rating Component	322	360	33	4 years ago	10	March 04, 2018	19	mit	JavaScript
Basic React component for star (or any other icon based) rating elements
Rn Emoji Feedback	209			7 years ago			3	mit	JavaScript
Demo of a Rating Component written in React Native
React Rater	189	64	9	2 months ago	32	September 07, 2022	1	bsd-3-clause	JavaScript
⭐️ Interative & customizable star rater
React Rating	175		1	a month ago	10	December 20, 2022		mit	TypeScript
:star: Zero-dependency, highly customizable rating component for React.
React Stars	149	170	21	3 years ago	11	November 06, 2017	38		JavaScript
A simple star rating component for your React projects :star: