npm package: @lemonadejs/color
Description: LemonadeJS Color picker component.
Author: Contact
Latest version: 5.8.0

# LemonadeJS Color Picker

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

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The LemonadeJS JavaScript Color Picker is a responsive and reactive component that simplifies color selection. It features two sections: a personalized palette and a pre-defined gradient of colors. With a customizable button, this component seamlessly integrates into your application, allowing users to pick colors effortlessly.

## Features

-   Lightweight: The JavaScript Color 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/color
```

### CDN

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

```html
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/style.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
```

### Usage

Quick example with Lemonade

```javascript
import Color from '@lemonadejs/color';
import '@lemonadejs/color/dist/style.css';
import '@lemonadejs/tabs/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

export default function App() {
    const self = this;

    return `<Color type="input"/>`;
}
```

Exemplo usando react

```jsx
import React, { useRef } from 'react';
import Color from '@lemonadejs/color/dist/react';
import '@lemonadejs/color/dist/style.css';
import '@lemonadejs/tabs/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

export default function App() {
    const color = useRef();
    return (
        <div>
            <Color type={'inline'} ref={color} />
        </div>
    );
}
```

Exemplo usando vue

```vue
<template>
    <Color type="inline" />
</template>

<script>
import Color from '@lemonadejs/color/dist/vue';
import '@lemonadejs/color/dist/style.css';
import '@lemonadejs/tabs/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

export default {
    name: 'App',
    components: {
        Color,
    },
};
</script>
```

### Configuration

You can configure things such as color palette, toggle button type, and event management.

#### Color Picker Properties

| Property | Type     | Description                                                                                       |
| -------- | -------- | ------------------------------------------------------------------------------------------------- |
| palette? | string[] | A matrix containing hexadecimal color values. There is a default palette.                         |
| closed?  | boolean  | Controls the open and close state of the modal.                                                   |
| type?    | string   | The type of element that will toggle the color picker modal. Options: 'input', 'inline' or empty. |
| value?   | string   | The value of the color that is currently selected.                                                |

### Color Picker Events

| Event     | Type                     | Description                |
| --------- | ------------------------ | -------------------------- |
| onopen?   | () => void               | Called when modal opens.   |
| onclose?  | () => void               | Called when modal closes.  |
| onupdate? | (instance.value) => void | Called when value updates. |

## License

The [LemonadeJS](https://lemonadejs.net) Color is released under the MIT.

## Other Tools

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