Eye Dropper

Reactive

EyeDropper API
.

Usage

<script>
    import { eyeDropper } from "@sveu/browser"

    const { supported, result, open } = eyeDropper()
</script>
<script>
    import { eyeDropper } from "@sveu/browser"

    const { supported, result, open } = eyeDropper()
</script>
svelte

Example

Not Supported by Your Browser
<script>
    import { eyeDropper } from "@sveu/browser"

    const { supported, open, result } = eyeDropper()
</script>

<div >
    {#if $supported}
        <div>
            Supported: {$supported}
        </div>

        <div>
            result: <span style="color: {$result?.replace(', 0)', ', 1)')}"
                >{$result}</span>
        </div>

        <button
            disabled="{!$supported}"
            on:click="{() => open()}"
            style="background: {$result?.replace(', 0)', ', 1)')}">
            Open Eye Dropper
        </button>
    {:else}
        <span>Not Supported by Your Browser</span>
    {/if}
</div>
<script>
    import { eyeDropper } from "@sveu/browser"

    const { supported, open, result } = eyeDropper()
</script>

<div >
    {#if $supported}
        <div>
            Supported: {$supported}
        </div>

        <div>
            result: <span style="color: {$result?.replace(', 0)', ', 1)')}"
                >{$result}</span>
        </div>

        <button
            disabled="{!$supported}"
            on:click="{() => open()}"
            style="background: {$result?.replace(', 0)', ', 1)')}">
            Open Eye Dropper
        </button>
    {:else}
        <span>Not Supported by Your Browser</span>
    {/if}
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Click fold/expand code

API

Options

Read more in the MDN



Returns

Name Description Type
supported Whether the browser supports the EyeDropper API Readable<boolean>
result The sRGBHex of the selected color Readable<string>
open Open the eye dropper (openOptions?: EyeDropperOpenOptions) => Promise
Last update at: Invalid Date