⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	2
📊 Variables & Constants	2
⚡ Async/Await Patterns	2
📐 Interfaces	3
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Variables & Constants
• Async/Await Patterns
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useEyeDropper/index.ts

📦 Imports

Name	Source
shallowRef	vue
useSupported	../useSupported

---

Variables & Constants

Name	Type	Kind	Value	Exported
eyeDropper	EyeDropper	let/var	new (window as any).EyeDropper()	✗
result	{ sRGBHex: string; }	let/var	await eyeDropper.open(openOptions)	✗

---

Async/Await Patterns

Type	Function	Await Expressions	Promise Chains
await-expression	useEyeDropper	eyeDropper.open(openOptions)	none
async-function	open	eyeDropper.open(openOptions)	none

---

Functions

useEyeDropper(options: UseEyeDropperOptions): { isSupported: any; sRGBHex: any; open: (openOptions?: EyeDropperOpenOptions) => Promise<{ sRGBHex: string; }>; }

Code

export function useEyeDropper(options: UseEyeDropperOptions = {}) {
  const { initialValue = '' } = options
  const isSupported = useSupported(() => typeof window !== 'undefined' && 'EyeDropper' in window)
  const sRGBHex = shallowRef(initialValue)

  async function open(openOptions?: EyeDropperOpenOptions) {
    if (!isSupported.value)
      return
    const eyeDropper: EyeDropper = new (window as any).EyeDropper()
    const result = await eyeDropper.open(openOptions)
    sRGBHex.value = result.sRGBHex
    return result
  }

  return { isSupported, sRGBHex, open }
}

• JSDoc:

  /**
   * Reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)
   *
   * @see https://vueuse.org/useEyeDropper
   */
  

• Parameters:

• options: UseEyeDropperOptions
• Return Type: { isSupported: any; sRGBHex: any; open: (openOptions?: EyeDropperOpenOptions) => Promise<{ sRGBHex: string; }>; }
• Calls:
• useSupported (from ../useSupported)
• shallowRef (from vue)
• eyeDropper.open

open(openOptions: EyeDropperOpenOptions): Promise<{ sRGBHex: string; }>

Code

async function open(openOptions?: EyeDropperOpenOptions) {
    if (!isSupported.value)
      return
    const eyeDropper: EyeDropper = new (window as any).EyeDropper()
    const result = await eyeDropper.open(openOptions)
    sRGBHex.value = result.sRGBHex
    return result
  }

• Parameters:
• openOptions: EyeDropperOpenOptions
• Return Type: Promise<{ sRGBHex: string; }>
• Calls:
• eyeDropper.open

---

Interfaces

EyeDropperOpenOptions

Interface Code

export interface EyeDropperOpenOptions {
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal
   */
  signal?: AbortSignal
}

Properties

Name	Type	Optional	Description
signal	AbortSignal	✓

EyeDropper

Interface Code

export interface EyeDropper {
  // eslint-disable-next-line ts/no-misused-new
  new(): EyeDropper
  open: (options?: EyeDropperOpenOptions) => Promise<{ sRGBHex: string }>
  [Symbol.toStringTag]: 'EyeDropper'
}

Properties

Name	Type	Optional	Description
open	(options?: EyeDropperOpenOptions) => Promise<{ sRGBHex: string }>	✗
[Symbol.toStringTag]	'EyeDropper'	✗

UseEyeDropperOptions

Interface Code

export interface UseEyeDropperOptions {
  /**
   * Initial sRGBHex.
   *
   * @default ''
   */
  initialValue?: string
}

Properties

Name	Type	Optional	Description
initialValue	string	✓

---

Type Aliases

UseEyeDropperReturn

type UseEyeDropperReturn = ReturnType<typeof useEyeDropper>;

---