Package Exports

color-pickcat
color-pickcat/dist/index.cjs.js
color-pickcat/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (color-pickcat) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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...

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