---
title: "JavaScript Five-Star Rating Plugin"
description: "Embed a lightweight (1Kb) five-star rating system in your web apps with `jSuites.rating`, a versatile Vanilla JavaScript plugin that works as a standalone component and within web frameworks."
source: https://jsuites.net/docs/rating
---
## Overview
The `jSuites.rating` plugin is designed to be easily integrated into various web development environments. Its compatibility with frameworks like React, Angular, and VueJS and its mobile-friendly design makes it versatile for adding rating functionality to web applications.
- React, Angular, and VueJS compatible.
- Mobile-friendly interface.
- Easy to integrate with several events.
- Available as both a JavaScript plugin and a web component.
## Documentation
### Available Methods
| Method | Description |
|------------------|--------------------------------------------------------------|
| getValue(); | Get the current value |
| setValue(number) | Set a new value @param {int} newValue - Set a new value |
### Initialization properties
| Property | Description |
|----------------|--------------------------------------------------------------------------------------|
| number: number | How many stars to be rendered. Default: 5 |
| value: number | Initial value. Default: null |
| tooltip: array | Legend for the stars. Default: [ 'Very bad', 'Bad', 'Average', 'Good', 'Very good' ] |
### Available Events
| Method | Description |
|----------|---------------------------------------------------------------------------------------------------|
| onchange | Trigger a method when value is changed. onchange(element: DOMElement, value: number) => void |
## Examples
### Five-Star Rating Web Component
Here's a quick example of a five-star rating with a specified value and tooltip:
{.all}
```html
```
### Basic Example with Events
Basic example of a five-star rating embed in a web application.
```html
```
```jsx
import { useRef } from 'react';
import { Rating } from 'jsuites/react';
import 'jsuites/dist/jsuites.css'
function App() {
const rating = useRef();
const console = useRef();
const handleChange = function(el, v) {
console.current.innerHTML = 'New value: ' + v;
}
return (
);
}
export default App;
```
```vue
```
### Custom Number Of Stars
Customize the number of stars for the rating plugin with events.
```html
```
```jsx
import { useRef } from 'react';
import { Rating } from 'jsuites/react';
import 'jsuites/dist/jsuites.css'
function App() {
const rating = useRef();
const setValue = function() {
rating.current.setValue(2);
}
const onChange = function() {
console.log('rating value changed')
}
return (