LemonadeJS Rating

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.

Features

• Lightweight: The JavaScript rating is only about 2 KBytes;
• Integration: It can be used as a standalone library or integrated with any modern framework;

Getting Started

You can install using NPM or using directly from a CDN.

npm Installation

To install it in your project using npm, run the following command:

$ npm install @lemonadejs/rating

CDN

To 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" />

Usage

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

Quick example with React

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 (
        <>
            <Rating value={value} number={number} onchange={change} ref={ratingRef} />
            <input type="button" value="Value=1" onClick={reset} />
            <input type="button" value="Add star" onClick={plus} />
            <input type="button" value="Remove star" onClick={minus} />
        </>
    );
}

Quick example with React

<template>
    <Rating :value="1" :number="5" :onchange="handleChange" ref="component" />
    <button @click="reset">Value=1</button>
    <button @click="plus">Add Star</button>
    <button @click="minus">Remove Star</button>
</template>

<script>
import Rating from '@lemonadejs/rating/dist/vue';

export default {
name: 'App',
components: {
    Rating,
},
methods: {
    reset: function () {
        this.$refs.component.current.value = 1;
    },
    plus: function () {
        this.$refs.component.current.number++;
    },
    minus: function () {
        this.$refs.component.current.number--;
    },
    handleChange: function (v) {
        console.log('New value: ', v)
    }
}
};
</script>

Attributes

| 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. |

Events

| Attribute | Description | | --- | --- | | onchange? | When the value of the component changes. |

License

The LemonadeJS LemonadeJS Rating is released under the MIT.

Other Tools

• jSuites Plugins
• Jspreadsheet Data Grid