Hooks

useClipboard

Copy text to the clipboard with a reactive copied state that auto-resets after a configurable timeout.

Basic Usage

Type text and click copy. The button shows a "Copied!" indicator that resets after 2 seconds.

<script lang="ts">
  import { Input, Button } from 'sv5ui';
  import { useClipboard, toast } from 'sv5ui';

  let text = $state('Hello, World!');
  const { copy, copied } = useClipboard();
</script>

<Input bind:value={text} placeholder="Enter text to copy..." />
<Button
  variant={copied ? 'solid' : 'outline'}
  color={copied ? 'success' : 'primary'}
  label={copied ? 'Copied!' : 'Copy'}
  leadingIcon={copied ? 'lucide:check' : 'lucide:clipboard'}
  size="sm"
  onclick={() => { copy(text); toast.success('Copied to clipboard!'); }}
/>

Custom Timeout

Set a custom timeout to control how long the copied state persists.

<script lang="ts">
  import { Input, Button } from 'sv5ui';
  import { useClipboard, toast } from 'sv5ui';

  const code = 'npm install sv5ui';
  const { copy, copied } = useClipboard({ timeout: 3000 });
</script>

<Input value={code} readonly size="sm" leadingIcon="lucide:terminal" />
<Button
  variant={copied ? 'solid' : 'outline'}
  color={copied ? 'success' : 'primary'}
  label={copied ? 'Copied for 3s!' : 'Copy Command'}
  leadingIcon={copied ? 'lucide:check' : 'lucide:clipboard'}
  size="sm"
  onclick={() => { copy(code); toast.success('Command copied!'); }}
/>

Options

OptionTypeDefault
timeoutnumber2000

Return Values

NameTypeDefault
copiedboolean-
copy(text: string) => Promise<void>-
useDebounce useMediaQuery