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?: String	The name of the component
number?: Number	The number of stars. Default 5.
value?: Number	The initial value. Default null.

Events

Attribute	Description
onchange?: Function	When 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

<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>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id='root'></div>
<script>
const Component = function() {
    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 `<>
        <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" />
    </>`;
}
// Render component
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

// 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>`;
}

// For installation: % npm install @lemonadejs/rating
// Add to your HTML: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
import React, { useRef, useEffect } from "react";
import Rating from "@lemonadejs/rating";

export default function Component() {
    const divRef = useRef();
    const ratingRef = useRef();

    useEffect(() => {
        if (divRef.current && !divRef.current.innerText) {
            ratingRef.current = Rating(divRef.current, {
                value: 3,
                number: 5,
                onchange: function(newValue) {
                    console.log('New value: ', newValue)
                }
            });
        }
    }, []);

    const reset = function () {
        ratingRef.current.value = 3
    };

    const plus = function () {
        ratingRef.current.number++
    };

    const minus = function () {
        ratingRef.current.number--
    };
    
    return (<>
        <div ref={divRef}></div>
        <button onClick={reset}>Value=1</button>
        <button onClick={plus}>Add Star</button>
        <button onClick={minus}>Remove Star</button>
    </>)
}

Jspreadsheet Pro