Typed HooksGetting StarteduseClipboardCopy

useClipboardCopy

A custom React hook that provides clipboard copy functionality.

clipboard

useClipboardCopy is a convenient custom React hook that enables copying text to the clipboard in React applications using the native JavaScript Clipboard API.

This hook handles browser compatibility checks and provides feedback on the success or failure of copy operations, making it easy to implement clipboard functionality with proper error handling. It also provides a status indicator that automatically resets after a delay.

Clipboard Copy Demo
Ready

Installation

pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/use-clipboard-copy

API

▸ useClipboardCopy(): [CopiedValue, CopyFunc, CopyStatus]

Returns

Returns [copiedText, copy, copyStatus]:

  • copiedText (string | null): The last successfully copied text or null if no copy has occurred or the last copy failed.
  • copy (function): A function that attempts to copy the provided text to the clipboard. Returns a Promise that resolves to a boolean indicating success or failure.
  • copyStatus ('idle' | 'success' | 'error'): The current status of the copy operation, automatically resets to 'idle' after 2 seconds.
useDefaultuseDebounce