Official website and documentation is here
Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
The LemonadeJS star rating plugin is a micro JavaScript component that implements the five star rating.
- Lightweight: The JavaScript rating is only about 2 KBytes;
- Integration: It can be used as a standalone library or integrated with any modern framework;
You can install using NPM or using directly from a CDN.
To install it in your project using npm, run the following command:
$ npm install @lemonadejs/ratingTo use rating via a CDN, include the following script tags in your HTML file:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/style.min.css" />Quick example with Lemonade
// For installation: % npm install @lemonadejs/rating
// Add to your HTML: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
import lemonade from "lemonadejs";
import Rating from "@lemonadejs/rating";
export default function Component() {
const self = this;
self.plus = () => {
self.number++;
}
self.minus = () => {
self.number--;
}
self.reset = () => {
self.value = 1;
}
self.change = (newValue) => {
console.log('New value', newValue);
}
self.number = 5;
self.value = 3;
return `<div>
<p><Rating :value="self.value" :number="self.number" onchange="self.change" /></p>
<input type="button" value="Value=1" onclick="self.reset" />
<input type="button" value="Add star" onclick="self.plus" />
<input type="button" value="Remove star" onclick="self.minus" />
</div>`;
}| Attribute | Type | Description |
|---|---|---|
| name? | String | The name of the component |
| number? | Number | The number of stars. Default 5. |
| value? | Number | The initial value. Default null. |
| Attribute | Description |
|---|---|
| onchange? | When the value of the component changes. |
The LemonadeJS LemonadeJS Rating is released under the MIT.