@lemonadejs/rating

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