useClipboard

Hook for copying textual content to the clipboard. Tries the modern Clipboard API first and falls back to document.execCommand('copy').

Exposes a hasCopied signal that stays true for a few milliseconds after a successful copy — ideal for temporarily switching a button label to "Copied".

When to use

✅ Use when…	🚫 Avoid when…
In "Copy" buttons next to inputs, code blocks, IDs, tokens. When you need transient visual feedback of success.	For copying binary data or complex multi-MIME payloads — use the Clipboard API directly.

Signature

const { onCopy, hasCopied } = useClipboard(text: string, timeout?: number);

text: content to be copied.
timeout: time (ms) that hasCopied stays true. Default 2000.

Example

import { Flex } from '@apollion-dsi/core/containers/flex';
import { Button } from '@apollion-dsi/core/elements/button';
import { TextArea } from '@apollion-dsi/core/form/text-area';
import { useClipboard } from '@apollion-dsi/core/hooks';
import { useState } from 'react';
 
export function UseClipboardExample() {
  const [inputValue, setInputValue] = useState('Super important text too long to type manually');
 
  const { onCopy, hasCopied } = useClipboard(inputValue);
 
  return (
    <Flex gap="large">
      <TextArea size="compact" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
 
      <Button size="extraSmall" variant="outlined" onClick={onCopy}>
        {hasCopied ? 'Copied' : 'Copy'}
      </Button>
 
      <TextArea size="compact" placeholder="Paste here" />
    </Flex>
  );
}

useClipboard

When to use

Signature

Example

See also