Skip to content

Colorjs.io-based color picker as a reusable webcomponent

License

Notifications You must be signed in to change notification settings

tokens-studio/color-picker

Repository files navigation

Colorjs.io Picker

NPM version badge License badge

Colorjs.io color picker as a reusable Web Component.

This is a Web Component port of the VueJS picker from Colorjs.io so that it can be used in an encapsulated and reusable manner.

Click here for the demo

Installation

With NPM:

npm install @tokens-studio/color-picker

Usage

// import the Web Component class and define it yourself
import { TSColorPicker } from '@tokens-studio/color-picker';
// or optionally pre-register it and use <ts-color-picker>
import '@tokens-studio/color-picker/define';
<ts-color-picker space="hsl"></ts-color-picker>

The space attribute can be passed optionally to set the initial color space.

Reactive props

The following properties can be manually set as well which will cause re-renders:

name type default description
spaceId string 'hsl' The id of the color space, same type as "space" attribute for setting the initial ColorSpace
coords Array<number> (3) [50, 50 ,50] Coordinates/channels e.g. for hsl: hue, saturation, lightness
alpha number 1 Alpha channel value of the color
precision number 3 Precision for outputting the colors

The easiest way to set the color programmatically, if you're not sure about coords and you've only got the color as CSS string:

import Color from 'colorjs.io';

const cssString = "rgb(255, 0, 0)";
const colorPickerEl = document.querySelector('ts-color-picker');
const color = new Color(cssString);
const converted = color.to(colorPickerEl.spaceId);
colorPickerEl.coords = converted.coords;
colorPickerEl.alpha = converted.alpha * 100;

Bare import specifiers

This Web Component is published to NPM as an ES Module. It's usable in any modern JavaScript context out of the box with the exception that it uses bare import specifiers, for example:

import { render } from 'lit';

By default, browsers won't know how to resolve the specifier 'lit', only absolute and relative paths are allowed.

This means you either need:

  • a bundler like Rollup (needs @rollup/plugin-node-resolve)
  • a smart dev server like Vite
  • inject an import map that tells the browser how to resolve the specifier

The easiest solution if you're not familiar with bundlers and dev servers is to create an import map e.g. using JSPM.

If you've installed this module from NPM into your local project:

npx jspm install -p nodemodules @tokens-studio/color-picker

Which creates an importmap.json file, the contents of which you can put inside an importmap script in your HTML:

<script type="importmap">
... import map contents here ...
</script>

Alternatively, if you don't want to install from NPM locally and would rather just consume from a CDN:

npx jspm install @tokens-studio/color-picker

About

Colorjs.io-based color picker as a reusable webcomponent

Resources

License

Stars

Watchers

Forks

Packages

No packages published