Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

useCopyToClipboard

Copy text with a temporary copied state and a fallback.

HooksInteraction@gaudi/design-system/hooks/interaction/use-copy-to-clipboardView in StorybookSource

Writes text with the Clipboard API and falls back to a hidden textarea (restoring focus and selection) where the API is blocked. isCopied resets after the timeout. Merges two earlier implementations: copyToClipboard and copy are the same function.

Usage

import { useCopyToClipboard } from '@gaudi/design-system/hooks';
const { copy, isCopied } = useCopyToClipboard();
<Button onClick={() => copy(url)}>{isCopied ? 'Copied' : 'Copy link'}</Button>

Examples

Storybook

One hook, several copy buttons

Storybook

Reset pending feedback

Storybook

API

2 options
3 return values

Accessibility

Keep the button name stable ("Copy link") and announce the result in a polite status region; swapping only the icon is not announced.

Notes

  • CodeBlock already has a copy button; use this hook for custom copy actions.
CodeBlockCodeBlock renders syntax-highlighted source with an optional header, copy button, line numbers, highlighted and focused lines, diffs, folding and line selection.10 examplesuseEventListenerDeclarative DOM event listener with cleanup.useHotkeyKeyboard shortcuts with platform-aware mod keys.useHoverPointer hover state with props to spread, ignoring touch.useMousePositionTrack viewport, page and optional element-relative pointer coordinates.useOnClickOutsideRun a callback when a press lands outside one or more elements.