Color Pickcat

A elegant JavaScript Color Picker written in StencilJS, can be used with vanilla JS, React, Vue, Etc.. It is built with web technologies components

Features

• Very easy to use
• Opacity support
• Multiple color formats (RGB, HSL, HEX)
• Eyedropper support (Only Chrome, Edge)
• Works on all modern browsers (no IE support)
• Multiple instances support
• Fast rendering
• more features coming soon...

Codepen Demos

• Basic introduction

Getting Started

Basic usage

Use it with plain html

<!-- HEAD -->
<script type='module' src='https://cdn.jsdelivr.net/npm/color-pickcat@latest/dist/color-pickcat/color-pickcat.esm.js'></script>

<!-- BODY -->
<color-pickcat></color-pickcat>

<!-- SCRIPT -->
<script>
    const colorPickcat = document.querySelector('color-pickcat');
    colorPickcat.addEventListener('color', ({ detail }) => console.log('Color selected: ', detail.value));
    colorPickcat.addEventListener('alpha', ({ detail }) => console.log('Value of alpha: ', detail.value));
</script>

Set default properties in plain HTML:

<color-pickcat color='#FFFFFF' colorArea='#FF0000' alpha='50'></color-pickcat>

Package installation

git clone https://github.com/luislozad/color-pickcat.git
cd color-pickcat

To build the component for production, run:

npm run build

To run the component, run:

npm run start

Using this component

There are three strategies we recommend for using web components built with Stencil.

Script tag

• Put a script tag similar to this <script type='module' src='https://cdn.jsdelivr.net/npm/color-pickcat@latest/dist/color-pickcat/color-pickcat.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install color-pickcat --save
• Put a script tag similar to this <script type='module' src='node_modules/color-pickcat/dist/color-pickcat/color-pickcat.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install color-pickcat --save
• Add an import to the npm packages import color-pickcat;
• Then you can use the element anywhere in your template, JSX, html etc

Show your support