---
title: "JavaScript Rating | LemonadeJS v5"
description: "LemonadeJS v5 archive. LemonadeJS Rating Component is a user-friendly solution for quickly collecting user feedback and ratings in HTML forms."
source: https://lemonadejs.com/docs/v5/plugins/rating/
---
# JavaScript Rating
`Pico Library`{.jtag .black .framework-images}
This library has less than 2 KBytes
The LemonadeJS Star Rating plugin is a micro JavaScript component that provides a customizable five-star rating system. It enables expressive and flexible ratings for products or services, going beyond basic numeric feedback.
## Documentation
### Installation
```bash
npm install @lemonadejs/rating
```
### Material icons
It requires Google Material Icons.
```html
```
### Attributes
| Attribute | Description |
|-------------------|-------------------------------------------|
| `name?: String` | The name of the component. |
| `number?: Number` | The number of stars. The default is `5`. |
| `value?: Number` | The initial value. The default is `null`. |
### Events
| Event | Description |
|----------------------|-----------------------------------------------|
| `onchange: Function` | Triggered when the component's value changes. |
## Examples
Updating `this.value` will automatically update the view. If you set `this.value` to its current value, the component will reset to its initial state.
### Basic example
```html
```
```javascript
import lemonade from "lemonadejs";
import Rating from "@lemonadejs/rating";
export default function Component() {
const plus = () => {
this.number++;
}
const minus = () => {
this.number--;
}
const reset = () => {
this.value = 1;
}
const change = (newValue) => {
console.log('New value', newValue);
}
this.number = 5;
this.value = 3;
return render => render`<>
`;
}
```
```jsx
// Add to your HTML:
import React, { useRef } from "react";
import Rating from "@lemonadejs/rating/dist/react";
export default function Component() {
const component = useRef();
const reset = function () {
component.current.value = 1;
};
const plus = function () {
component.current.number++;
};
const minus = function () {
component.current.number--;
};
const handleChange = function (v) {
console.log('New value: ', v);
}
return (
)
}
```
```vue
```
## Related Tools
- [JavaScript Rating](https://jsuites.net/docs/rating) - Standalone five-star rating component
- [Simple Star Rating Component Implementation](/docs/v5/examples/rating/) - Build a custom rating component from scratch