Rating

Pico Library This library has less than 2 KBytes

The LemonadeJS star rating plugin is a micro JavaScript component that implements the five star rating.

Documentation


Installation

npm install @lemonadejs/rating

Attributes

Attribute Description
name?: StringThe name of the component
number?: NumberThe number of stars. Default 5.
value?: NumberThe initial value. Default null.

Events

Attribute Description
onchange?: FunctionWhen the value of the component changes
self.onchange(value: Number) => void


Examples

Changing the self.value will trigger the view updates. If you set the self.value with the same current value, that will reset the value.

Basic example



Source code


Browser
NPM
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/index.min.js"></script>
<div id='root'></div>
<script>
var Component = function() {
    const self = this;
    self.change = function(newValue) {
        console.log('New value', newValue);
    }
    self.number = 5;
    self.value = 3;

    return `<>
        <Rating value="{{self.value}}" number="{{self.number}}" onchange="{{self.change}}" />
        <input type="button" value="Set value" onclick="self.value = 3" />
        <input type="button" value="Add star" onclick="self.number++" />
        <input type="button" value="Remove star" onclick="self.number--" />
    </>`;
}
</script>
</html>

import lemonade from "lemonadejs";
import Rating from "@lemonadejs/rating";

// Register the component to be used across the application
lemonade.setComponents({ Rating });

export default function Component() {
    const self = this;

    self.number = 5;
    self.value = 3;

    self.change = function(newValue) {
        console.log('New value', newValue);
    }

    return `<>
        <Rating value="{{self.value}}" number="{{self.number}}" onchange="{{self.change}}" />
        <input type="button" value="Set value" onclick="self.value = 3" />
        <input type="button" value="Add star" onclick="self.number++" />
        <input type="button" value="Remove star" onclick="self.number--" />
    </>`;
}

Related content