Simple Hue Picker

A tiny library to show a Hue picker for user!

  • Small. 1.25 Kb (minified and gzipped). No deps. Controlled by Size Limit.
  • Framework agnostic. Works with TypeScript and any framework: React, Vue, Preact, Solid and Svelte!

Sponsored by Evil Martians

Install

npm install simple-hue-picker

Usage

Since it’s a Web Component and not a framework component, it requires some framework-specific treatment. But don’t fret, no hacks.

The first common step is to import the module. Do this in your main.ts file or in your wrapper (if you need one):

import 'simple-hue-picker';

As soon as you do this, you’ll have a new globally-available component called <hue-picker />. Under the hood the whole component is just an <input type="range" /> and an SVG that gives you the background.

It accepts all the same props as a usual <input />. The selected value is stored in, as usual, value.

The lib exposes 2 events: change and input, both fire a CustomEvent<number>. Be aware of the difference between those two: change only fires when the value is commited (the mouse is released), while input is realtime.

This is what a typical even handler would look like:

<hue-picker onInput={(e) => setValue(e.detail)} />

Usage with React

React is the least Web Components friendly, because of its Synthetic events. But have no fear: we ship a special React component for you, that does all the dirty work for you!

import { HuePicker } from "simple-hue-picker/react";

function App() {
  const [selected, setSelected] = useState(120);

  return <HuePicker step={10} value={selected} onInput={e => setSelected(e.detail)} />;
};

Usage with Vue

Vue is Web Components friendly, so usage is pretty simple:

<script setup lang="ts">
import type { HueChangeEvent } from "simple-hue-picker/react";
import { ref } from 'vue'

const selectedHue = ref(120)
</script>

<template>
  <div>
    {{selectedHue}}
  </div>
  <hue-picker :value="selectedHue" @input="(e: HueChangeEvent) => selectedHue = e.detail">
  </hue-picker>  
</template>

Usage with Preact

Preact is Web Components friendly, so usage is extremely simple:

export function App() {
  const [selected, setSelected] = useState(150);
  return <hue-picker value={selected} onInput={e => setSelected(e.detail)}></hue-picker>
}

Usage with Solid

Solid is Web Components friendly, so usage is simple, but you need to explicitly give the compiler a hint, that value is an attribute:

function App() {
  const [selected, setSelected] = createSignal(120);

  return (
    <hue-picker
      step={10}
      // Notice the attr:
      attr:value={selected()}
      onInput={(e) => setSelected(e.detail)}
    ></hue-picker>
  );
}

Usage with Svelte

Svelte is Web Components friendly, but as of my knowledge it doesn’t provide any way for a library author to define types for Web Components. Therefore, it’s a bit of a manual work and doesn’t work with two-way data binding:

<script lang="ts">
  import type { HueChangeEvent } from "simple-hue-picker";

  let value = 120;
  const onInput = (e: HueChangeEvent) => (value = e.detail);
</script>

<hue-picker {value} step="10" on:input={onChange} />

Usage with SSR

This library is powered by Web Components. If you try to initialize it in Node environment, you’ll get something like “HTMLElement is not defined”. Since this component doesn’t provide any critical functionality, feel free to use tools that your meta-framework provide you with that allow you to bypass the SSR step for this component. For example, for Next.js it would be something like this:

import dynamic from "next/dynamic";

const HuePicker = dynamic(() => import("simple-hue-picker/react"), {
  ssr: false,
});

function App() {
  const [selected, setSelected] = useState(120);

  return <HuePicker step={10} value={selected} onInput={e => setSelected(e.detail)} />;
};

Usage with forms

When you use an input inside a Web Component, it doesn’t propagate its value in FormData when you submit a form. We solve this by rendering an <input type="hidden" /> with the provided name, and sync its value with the hue-picker.

TLDR: all is covered, use name as usual 😁

GitHub

View Github