2.2.0 • Published 9 months ago

@lemonadejs/rating v2.2.0

Weekly downloads
-
License
-
Repository
-
Last release
9 months ago

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

AttributeTypeDescription
name?StringThe name of the component
number?NumberThe number of stars. Default 5.
value?NumberThe initial value. Default null.

Events

AttributeDescription
onchange?When the value of the component changes.

License

The LemonadeJS LemonadeJS Rating is released under the MIT.

Other Tools