useCopyToClipboard | COSS for Svelte

A Svelte utility that wraps the Clipboard API and resets its copied state after a timeout. It is useful for copy buttons that briefly confirm success.

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/use-copy-to-clipboard.json

Usage

Basic

<script lang="ts">
  import { useCopyToClipboard } from "$lib/hooks/use-copy-to-clipboard.svelte.js";

  let { text }: { text: string } = $props();
  const clipboard = useCopyToClipboard();
</script>

<button onclick={() => clipboard.copyToClipboard(text)} type="button">
  {clipboard.isCopied ? "Copied!" : "Copy"}
</button>

Custom timeout

isCopied resets after two seconds by default. Pass a different duration in milliseconds:

const clipboard = useCopyToClipboard({ timeout: 3_000 });

Set timeout to 0 to keep isCopied true until the component unmounts.

Callback on copy

Run a callback after the clipboard write succeeds:

const clipboard = useCopyToClipboard({
  onCopy: () => console.log("Copied to clipboard"),
});

With icon swap

Swap an icon briefly to confirm the copy:

<script lang="ts">
  import Copy01Icon from "@hugeicons/core-free-icons/Copy01Icon";
  import Tick01Icon from "@hugeicons/core-free-icons/Tick01Icon";
  import { Button } from "$lib/components/ui/button/index.js";
  import HugeiconsIcon from "$lib/hugeicons-icon.svelte";
  import { useCopyToClipboard } from "$lib/hooks/use-copy-to-clipboard.svelte.js";

  let { value }: { value: string } = $props();
  const clipboard = useCopyToClipboard();
</script>

<Button
  aria-label="Copy to clipboard"
  onclick={() => clipboard.copyToClipboard(value)}
  size="icon"
  variant="outline"
>
  <HugeiconsIcon
    aria-hidden="true"
    icon={clipboard.isCopied ? Tick01Icon : Copy01Icon}
    strokeWidth={2}
  />
</Button>

API

function useCopyToClipboard(options?: { timeout?: number; onCopy?: () => void }): {
  copyToClipboard: (value: string) => void;
  readonly isCopied: boolean;
};

Options

Property	Type	Default	Description
`timeout`	`number`	`2000`	Milliseconds before copied feedback resets. Use `0` to keep it true.
`onCopy`	`() => void`	—	Called after a successful clipboard write.

Return value

Property	Type	Description
`copyToClipboard`	`(value: string) => void`	Copies non-empty text when the Clipboard API is available.
`isCopied`	`boolean`	True until the configured timeout ends after a successful copy.