LemonadeJS star rating plugin
npm install @lemonadejs/ratingOfficial 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:
``bash`
$ npm install @lemonadejs/rating
To use rating via a CDN, include the following script tags in your HTML file:
`html`
Quick example with Lemonade
`javascript
// For installation: % npm install @lemonadejs/rating
// Add to your HTML:
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
;
}
`Quick example with React
jsx
import React, { useRef, useState } from 'react';
import Rating from '@lemonadejs/rating/dist/react';export default function App() {
const ratingRef = useRef();
const [number, setNumber] = useState(5);
const [value, setValue] = useState(3);
const plus = () => {
setNumber(number + 1);
};
const minus = () => {
setNumber(number - 1);
};
const reset = () => {
setValue(1);
};
const change = (newValue) => {
console.log('New value', newValue);
};
return (
<>
);
}
`Quick example with React
vue
``| 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.