{"id":14957111,"url":"https://github.com/woofers/use-eye-dropper","last_synced_at":"2025-03-02T13:12:42.232Z","repository":{"id":38390834,"uuid":"430498340","full_name":"woofers/use-eye-dropper","owner":"woofers","description":"👀🩸🧫 Browser color picker hook for React","archived":false,"fork":false,"pushed_at":"2024-12-30T04:31:28.000Z","size":4786,"stargazers_count":17,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-16T03:14:23.251Z","etag":null,"topics":["api","eye-dropper","hook","react","react-js"],"latest_commit_sha":null,"homepage":"https://jaxs.onl/use-eye-dropper/","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/woofers.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":"2021-11-21T22:44:30.000Z","updated_at":"2025-01-16T07:46:07.000Z","dependencies_parsed_at":"2024-06-09T00:05:49.741Z","dependency_job_id":"cdc29fd3-6092-41f0-8226-4eef46ad765b","html_url":"https://github.com/woofers/use-eye-dropper","commit_stats":{"total_commits":184,"total_committers":3,"mean_commits":"61.333333333333336","dds":0.05434782608695654,"last_synced_commit":"9e5a80fc12e9dda9d5d963f699ba67b4ee859838"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/woofers%2Fuse-eye-dropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/woofers%2Fuse-eye-dropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/woofers%2Fuse-eye-dropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/woofers%2Fuse-eye-dropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/woofers","download_url":"https://codeload.github.com/woofers/use-eye-dropper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241509653,"owners_count":19974071,"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","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":["api","eye-dropper","hook","react","react-js"],"created_at":"2024-09-24T13:14:05.857Z","updated_at":"2025-03-02T13:12:42.210Z","avatar_url":"https://github.com/woofers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# useEyeDropper\n\n[![img](https://github.com/woofers/use-eye-dropper/actions/workflows/workflow.yml/badge.svg)](https://github.com/woofers/use-eye-dropper/actions) [![img](https://badge.fury.io/js/use-eye-dropper.svg)](https://www.npmjs.com/package/use-eye-dropper) [![img](https://img.shields.io/npm/dt/use-eye-dropper.svg)](https://www.npmjs.com/package/use-eye-dropper) [![img](https://badgen.net/bundlephobia/minzip/use-eye-dropper)](https://bundlephobia.com/result?p=use-eye-dropper) [![img](https://img.shields.io/npm/l/use-eye-dropper.svg)](https://github.com/woofers/use-eye-dropper/blob/main/LICENSE)\n\n👀🩸🧫 Browser color picker hook for React.\n\nImplements the [EyeDropper API](https://github.com/WICG/eyedropper-api)\ninto an easy-to-use React hook.  This API is currently only available in Chromium based browsers.\n\n## Features\n\n- Supports Server-Side rendering.\n- Test coverage with unit and integration tests.\n- TypeScript support\n- Under 680 bytes GZipped\n- Safely detect and fallback on unsupported browsers using `isSupported` method.\n- Closes eye dropper when corresponding component is unmounted.\n- Provides explicit `close` method to cancel eye dropper (signals can still be used).\n\n\n\n## Installation\n\n**pnpm**\n\n```pnpm\npnpm add use-eye-dropper\n```\n\n**Yarn**\n\n```yarn\nyarn add use-eye-dropper\n```\n\n**npm**\n\n```npm\nnpm install use-eye-dropper\n```\n\n## Usage\n\n```jsx\nimport React, { useState, useCallback } from 'react'\nimport useEyeDropper from 'use-eye-dropper'\n\nconst App = () =\u003e {\n  const { open, close, isSupported } = useEyeDropper()\n  const [color, setColor] = useState('#fff')\n  const [error, setError] = useState()\n  // useEyeDropper will reject/cleanup the open() promise on unmount,\n  // so setState never fires when the component is unmounted.\n  const pickColor = useCallback(() =\u003e {\n    // Using async/await (can be used as a promise as-well)\n    const openPicker = async () =\u003e {\n      try {\n        const color = await open()\n        setColor(color.sRGBHex)\n      } catch (e) {\n        console.log(e)\n        // Ensures component is still mounted\n        // before calling setState\n        if (!e.canceled) setError(e)\n      }\n    }\n    openPicker()\n  }, [open])\n  return (\n    \u003c\u003e\n      \u003cdiv style={{ padding: '64px', background: color }}\u003eSelected color\u003c/div\u003e\n      {isSupported() ?\n          \u003cbutton onClick={pickColor}\u003ePick color\u003c/button\u003e\n        : \u003cspan\u003eEyeDropper API not supported in this browser\u003c/span\u003e\n      }\n      {!!error \u0026\u0026 \u003cdiv\u003e{error.message}\u003c/div\u003e}\n    \u003c/\u003e\n  )\n}\n```\n\n### Usage with TypeScript\n\nWith TypeScript all of the types will be inferred where possible, however if you need to use error\nhandling some type-guard functions can be used to narrow down the type of the\nerror from the catch block.  Otherwise it will be `unknown`.\n\nHere is one approach to deal\nwith this when working with TypeScript and dropper errors:\n\n```ts\ntype DropperError = { \n  message: string\n  canceled?: boolean\n}\n\nconst isError = \u003cT, \u003e(err: DropperError | T): err is DropperError =\u003e \n  !!err \u0026\u0026 err instanceof Error \u0026\u0026 !!err.message\n\nconst isNotCanceled = \u003cT, \u003e(err: DropperError | T): err is DropperError =\u003e\n  isError(err) \u0026\u0026 !err.canceled\n```\n\nand then `!e.canceled` can be replaced with `isNotCanceled(e)`, the type-guard will enforce a proper type when using `setError`.\n\nThis will also work for `isError`.\n\n## Methods\n\n- `open({ signal?: AbortSignal }) =\u003e Promise\u003c{ sRGBHex: string }\u003e'`\n\n  Opens the EyeDropper API in supported browsers and returns a\n  promise which will resolve with the selected color.  Alternatively the promise will be rejected if\n  the user cancels the operation, for instance by hitting escape.\n  Additionally if the browser does not support the API, the\n  promise is rejected. While the spec currently indicates that a\n  6-digit HEX value is returned, the current Chrome implementation\n  returns a `rgba` value.\n\n- `close() =\u003e void`\n\n  This method closes the EyeDropper API selector if it is open and\n  rejects the promise from `open`. Otherwise this\n  performs a no-op.\n\n- `isSupported() =\u003e boolean`\n\n  Determines if the EyeDropper API is supported in the current browser.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwoofers%2Fuse-eye-dropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwoofers%2Fuse-eye-dropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwoofers%2Fuse-eye-dropper/lists"}