{"id":14782550,"url":"https://github.com/dkzlv/simple-hue-picker","last_synced_at":"2025-07-29T07:31:55.906Z","repository":{"id":200508826,"uuid":"704604692","full_name":"dkzlv/simple-hue-picker","owner":"dkzlv","description":"🎨 Tiny Hue picker for any framework!","archived":false,"fork":false,"pushed_at":"2023-10-19T10:51:06.000Z","size":115,"stargazers_count":45,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-26T13:24:52.221Z","etag":null,"topics":["color","color-picker","cross-framework","hue","web-components"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/github/dkzlv/simple-hue-picker","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dkzlv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-13T16:09:38.000Z","updated_at":"2025-03-26T16:05:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"85f0cb38-3988-4002-961f-ee905303126d","html_url":"https://github.com/dkzlv/simple-hue-picker","commit_stats":null,"previous_names":["dkzlv/simple-hue-picker"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dkzlv/simple-hue-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dkzlv%2Fsimple-hue-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dkzlv%2Fsimple-hue-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dkzlv%2Fsimple-hue-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dkzlv%2Fsimple-hue-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dkzlv","download_url":"https://codeload.github.com/dkzlv/simple-hue-picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dkzlv%2Fsimple-hue-picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267645958,"owners_count":24120902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","color-picker","cross-framework","hue","web-components"],"created_at":"2024-09-17T03:01:39.068Z","updated_at":"2025-07-29T07:31:55.613Z","avatar_url":"https://github.com/dkzlv.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Simple Hue Picker\n\n![](cover.png)\n\nA tiny library to show a Hue picker for user!\n\n- **Small**. 1.25 Kb (minified and gzipped). No deps. Controlled by [Size Limit](https://github.com/ai/size-limit).\n- **Framework agnostic**. Works with TypeScript and any framework: React, Vue, Preact, Solid and Svelte!\n\n\u003ca href=\"https://evilmartians.com/?utm_source=simple-hue-picker\"\u003e\n  \u003cimg src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\"\n       alt=\"Sponsored by Evil Martians\" width=\"236\" height=\"54\"\u003e\n\u003c/a\u003e\n\n## Install\n\n```\nnpm install simple-hue-picker\n```\n\n# Usage\n\nSince it's a Web Component and not a framework component, it requires some framework-specific treatment. But don't fret, no hacks.\n\nThe first common step is to import the module. Do this in your `main.ts` file or in your wrapper (if you need one):\n\n```ts\nimport 'simple-hue-picker';\n```\n\nAs soon as you do this, you'll have a new globally-available component called `\u003chue-picker /\u003e`. Under the hood the whole component is just an `\u003cinput type=\"range\" /\u003e` and an SVG that gives you the background.\n\nIt accepts all the same props as a usual `\u003cinput /\u003e`. The selected value is stored in, as usual, `value`.\n\nThe lib exposes 2 events: `change` and `input`, both fire a `CustomEvent\u003cnumber\u003e`. Be aware of the difference between those two: `change` only fires when the value is *commited* (the mouse is released), while `input` is realtime. \n\nThis is what a typical even handler would look like:\n\n```tsx\n\u003chue-picker onInput={(e) =\u003e setValue(e.detail)} /\u003e\n```\n\n## Usage with React\n\nReact 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!\n\n```tsx\nimport { HuePicker } from \"simple-hue-picker/react\";\n\nfunction App() {\n  const [selected, setSelected] = useState(120);\n\n  return \u003cHuePicker step={10} value={selected} onInput={e =\u003e setSelected(e.detail)} /\u003e;\n};\n```\n\n## Usage with Vue\n\nVue is Web Components friendly, so usage is pretty simple:\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport type { HueChangeEvent } from \"simple-hue-picker/react\";\nimport { ref } from 'vue'\n\nconst selectedHue = ref(120)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    {{selectedHue}}\n  \u003c/div\u003e\n  \u003chue-picker :value=\"selectedHue\" @input=\"(e: HueChangeEvent) =\u003e selectedHue = e.detail\"\u003e\n  \u003c/hue-picker\u003e  \n\u003c/template\u003e\n```\n  \n## Usage with Preact\n\nPreact is Web Components friendly, so usage is extremely simple:\n\n```tsx\nexport function App() {\n  const [selected, setSelected] = useState(150);\n  return \u003chue-picker value={selected} onInput={e =\u003e setSelected(e.detail)}\u003e\u003c/hue-picker\u003e\n}\n```\n\n## Usage with Solid\n\nSolid is Web Components friendly, so usage is simple, but you need to explicitly give the compiler a hint, that `value` is an attribute:\n\n```tsx\nfunction App() {\n  const [selected, setSelected] = createSignal(120);\n\n  return (\n    \u003chue-picker\n      step={10}\n      // Notice the attr:\n      attr:value={selected()}\n      onInput={(e) =\u003e setSelected(e.detail)}\n    \u003e\u003c/hue-picker\u003e\n  );\n}\n```\n\n## Usage with Svelte\n\nSvelte 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:\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import type { HueChangeEvent } from \"simple-hue-picker\";\n\n  let value = 120;\n  const onInput = (e: HueChangeEvent) =\u003e (value = e.detail);\n\u003c/script\u003e\n\n\u003chue-picker {value} step=\"10\" on:input={onChange} /\u003e\n```\n\n## Usage with SSR\n\nThis 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:\n\n```tsx\nimport dynamic from \"next/dynamic\";\n\nconst HuePicker = dynamic(() =\u003e import(\"simple-hue-picker/react\"), {\n  ssr: false,\n});\n\nfunction App() {\n  const [selected, setSelected] = useState(120);\n\n  return \u003cHuePicker step={10} value={selected} onInput={e =\u003e setSelected(e.detail)} /\u003e;\n};\n```\n\n## Usage with forms\n\nWhen 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 `\u003cinput type=\"hidden\" /\u003e` with the provided `name`, and sync its value with the hue-picker.\n\nTLDR: all is covered, use `name` as usual 😁\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdkzlv%2Fsimple-hue-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdkzlv%2Fsimple-hue-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdkzlv%2Fsimple-hue-picker/lists"}