Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dkzlv/simple-hue-picker
🎨 Tiny Hue picker for any framework!
https://github.com/dkzlv/simple-hue-picker
color color-picker cross-framework hue web-components
Last synced: 11 days ago
JSON representation
🎨 Tiny Hue picker for any framework!
- Host: GitHub
- URL: https://github.com/dkzlv/simple-hue-picker
- Owner: dkzlv
- License: mit
- Created: 2023-10-13T16:09:38.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-19T10:51:06.000Z (about 1 year ago)
- Last Synced: 2024-10-14T01:08:42.409Z (25 days ago)
- Topics: color, color-picker, cross-framework, hue, web-components
- Language: JavaScript
- Homepage: https://stackblitz.com/github/dkzlv/simple-hue-picker
- Size: 112 KB
- Stars: 39
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/ai/size-limit).
- **Framework agnostic**. Works with TypeScript and any framework: React, Vue, Preact, Solid and Svelte!
## 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):
```ts
import 'simple-hue-picker';
```
As soon as you do this, you'll have a new globally-available component called ``. Under the hood the whole component is just an `` and an SVG that gives you the background.
It accepts all the same props as a usual ``. The selected value is stored in, as usual, `value`.
The lib exposes 2 events: `change` and `input`, both fire a `CustomEvent`. 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:
```tsx
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!
```tsx
import { HuePicker } from "simple-hue-picker/react";
function App() {
const [selected, setSelected] = useState(120);
return setSelected(e.detail)} />;
};
```
## Usage with Vue
Vue is Web Components friendly, so usage is pretty simple:
```vue
import type { HueChangeEvent } from "simple-hue-picker/react";
import { ref } from 'vue'
const selectedHue = ref(120)
{{selectedHue}}
selectedHue = e.detail">
```
## Usage with Preact
Preact is Web Components friendly, so usage is extremely simple:
```tsx
export function App() {
const [selected, setSelected] = useState(150);
return setSelected(e.detail)}>
}
```
## 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:
```tsx
function App() {
const [selected, setSelected] = createSignal(120);
return (
setSelected(e.detail)}
>
);
}
```
## 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:
```html
import type { HueChangeEvent } from "simple-hue-picker";
let value = 120;
const onInput = (e: HueChangeEvent) => (value = e.detail);
```
## 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:
```tsx
import dynamic from "next/dynamic";
const HuePicker = dynamic(() => import("simple-hue-picker/react"), {
ssr: false,
});
function App() {
const [selected, setSelected] = useState(120);
return 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 `` with the provided `name`, and sync its value with the hue-picker.
TLDR: all is covered, use `name` as usual 😁