⬅️ Back to Table of Contents

📄 useEyeDropper

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	4
⚡ Async/Await Patterns	2
📐 Interfaces	4

📚 Table of Contents

• Imports
• Async/Await Patterns
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useEyeDropper/index.ts

📦 Imports

Name	Source
ShallowRef	vue
Supportable	../types
shallowRef	vue
useSupported	../useSupported

---

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): UseEyeDropperReturn

Reactive EyeDropper API

See: https://vueuse.org/useEyeDropper

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

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

Calls:

• useSupported (from ../useSupported)
• shallowRef (from vue)
• eyeDropper.open

Code

export function useEyeDropper(options: UseEyeDropperOptions = {}): UseEyeDropperReturn {
  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 }
}

Internal helpers

Declared inside another function in this file.

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

Parameters:

• openOptions EyeDropperOpenOptions

Returns: Promise<{ sRGBHex: string; }>

Calls:

• eyeDropper.open

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
  }

---

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	✓	not shown

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 }>	✗	not shown
[Symbol.toStringTag]	'EyeDropper'	✗	not shown

UseEyeDropperOptions

Interface Code

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

Properties

Name	Type	Optional	Description
initialValue	string	✓	not shown

UseEyeDropperReturn

Interface Code

export interface UseEyeDropperReturn extends Supportable {
  sRGBHex: ShallowRef<string>
  open: (openOptions?: EyeDropperOpenOptions) => Promise<{ sRGBHex: string } | undefined>
}

Properties

Name	Type	Optional	Description
sRGBHex	ShallowRef<string>	✗	not shown
open	(openOptions?: EyeDropperOpenOptions) => Promise<{ sRGBHex: string } \| undef...	✗	not shown

---

Generated by Syntax Scribe