# LemonadeJS Rating

[Official website and documentation is here](https://lemonadejs.net/components/rating)

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:

```bash
$ npm install @lemonadejs/rating
```

### CDN

To use rating via a CDN, include the following script tags in your HTML file:

```html
<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

```javascript
// 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

```jsx
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

```vue
<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](https://lemonadejs.net) LemonadeJS Rating is released under the MIT.

## Other Tools

-   [jSuites Plugins](https://jsuites.net/docs)
-   [Jspreadsheet Data Grid](https://jspreadsheet.com)