Clipboard

Reactive Clipboard.

Usage

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

    const { supported, text, copied, copy } = clipboard()
</script>
<script>
    import {clipboard} from "@sveu/browser"

    const { supported, text, copied, copy } = clipboard()
</script>
svelte

Example

<script lang="ts">
    import { clipboard } from "@sveu/browser" 

    let value = "Hello"

    const { text, supported, copy, copied } = clipboard() 
</script>

{#if $supported}
    <div>
        <p>
            Current copied: <code>{$text || "none"}</code>
        </p>
        <input  bind:value="{value}" type="text" />
        <button on:click="{() => copy(value)}">
            {$copied ? "copied" : "copy"}
        </button>
    </div>
{/if}
<script lang="ts">
    import { clipboard } from "@sveu/browser" 

    let value = "Hello"

    const { text, supported, copy, copied } = clipboard() 
</script>

{#if $supported}
    <div>
        <p>
            Current copied: <code>{$text || "none"}</code>
        </p>
        <input  bind:value="{value}" type="text" />
        <button on:click="{() => copy(value)}">
            {$copied ? "copied" : "copy"}
        </button>
    </div>
{/if}
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Click fold/expand code

API

Options

Name Description Type Default
read Enabled reading for clipboard. boolean false
source Copy from source. Source undefined
copiedDuring Seconds to reset state of copied. number 1.5
legacy Use legacy clipboard API boolean false


Returns

Name Description Type
supported Is the browser support Clipboard API. Readable<boolean>
text The text in the clipboard. Readable<string>
copied Whether the text is copied. Readable<boolean>
copy Copy text to clipboard (text: string) => Promise<void>
Last update at: Invalid Date