![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n A robust React hook for copying text to clipboard with fallback support\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-copy-to-clipboard.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/use-copy-to-clipboard.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/use-copy-to-clipboard?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/use-copy-to-clipboard.svg?style=flat-square&color=007acc\")
\n \n
\n Installation ā¢\n Quick Start ā¢\n API Reference ā¢\n Examples ā¢\n License\n
\n\n\n \n š View Storybook Demo\n \n
\n\n---\n\n## Overview\n\n`@usefy/use-copy-to-clipboard` provides a simple way to copy text to the clipboard using the modern Clipboard API with automatic fallback for older browsers. Features include auto-reset timeout, success/error callbacks, and copy state tracking.\n\n**Part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem** ā a collection of production-ready React hooks designed for modern applications.\n\n### Why use-copy-to-clipboard?\n\n- **Zero Dependencies** ā Pure React implementation with no external dependencies\n- **TypeScript First** ā Full type safety with exported interfaces\n- **Modern + Fallback** ā Uses Clipboard API with automatic `execCommand` fallback\n- **Auto Reset** ā Copied state automatically resets after configurable timeout\n- **Callbacks** ā `onSuccess` and `onError` callbacks for custom handling\n- **Async/Await** ā Returns promise with boolean success indicator\n- **SSR Compatible** ā Works seamlessly with Next.js, Remix, and other SSR frameworks\n- **Stable References** ā Memoized copy function for optimal performance\n- **Well Tested** ā Comprehensive test coverage with Vitest\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/use-copy-to-clipboard\n\n# yarn\nyarn add @usefy/use-copy-to-clipboard\n\n# pnpm\npnpm add @usefy/use-copy-to-clipboard\n```\n\n### Peer Dependencies\n\nThis package requires React 18 or 19:\n\n```json\n{\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\"\n }\n}\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { useCopyToClipboard } from \"@usefy/use-copy-to-clipboard\";\n\nfunction CopyButton() {\n const [copiedText, copy] = useCopyToClipboard();\n\n return (\n \n );\n}\n```\n\n---\n\n## API Reference\n\n### `useCopyToClipboard(options?)`\n\nA hook that provides clipboard copy functionality with state tracking.\n\n#### Parameters\n\n| Parameter | Type | Description |\n| --------- | --------------------------- | --------------------- |\n| `options` | `UseCopyToClipboardOptions` | Configuration options |\n\n#### Options\n\n| Option | Type | Default | Description |\n| ----------- | ------------------------ | ------- | --------------------------------------------------------------------- |\n| `timeout` | `number` | `2000` | Time in ms before `copiedText` resets to null. Set to `0` to disable. |\n| `onSuccess` | `(text: string) => void` | ā | Callback called when copy succeeds |\n| `onError` | `(error: Error) => void` | ā | Callback called when copy fails |\n\n#### Returns `[copiedText, copy]`\n\n| Index | Type | Description |\n| ----- | ------------------------------------ | -------------------------------------------- |\n| `[0]` | `string \\| null` | The last successfully copied text, or `null` |\n| `[1]` | `(text: string) => Promise\n {code}\n \n {maskedKey}\n \n \n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}