Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA button that picks a color from anywhere on the screen with the browser EyeDropper API, hides or disables itself where the API does not exist, handles cancel, and returns a hex string. Includes a useEyeDropper hook.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
The EyeDropper API exists in Chromium browsers over HTTPS. Elsewhere the button hides itself (fallback="hide") or stays disabled with an explanation (fallback="disabled"), so always offer the hex field or the color area as well.
| Prop | Type | Default | Description |
|---|---|---|---|
onPick | (hex: string) => void | - | Gets #rrggbb. |
onError | (error) => void | - | Failures other than a cancel. |
fallback | hide, disabled | hide | Where the API is missing. |
label | string | Pick a color from the screen | Accessible name of the icon button. |
The hook returns { supported, pick() }; pick() resolves to a hex string, or null when cancelled.
aria-label, or its visible text) and a title that says why it is unavailable when it is disabled. The browser's own picker handles the pointer; Escape cancels it.supported is false until after hydration, so server and client render the same markup and there is no flash of a button that then disappears.role="status" element.The component ships with a Testing Library test (eyedropper-button.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.