@lemonadejs/color
v3.5.0
Published
LemonadeJS Color picker component.
Downloads
40
Maintainers
Readme
LemonadeJS Color Picker
Official website and documentation is here
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:
$ npm install @lemonadejs/color
CDN
To use color picker via a CDN, include the following script tags in your HTML file:
<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
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
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
<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 Color is released under the MIT.