Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kokonut-labs/kokonutui/llms.txt

Use this file to discover all available pages before exploring further.

​

A React hook that provides an easy way to copy text to the clipboard with automatic state management for showing copy feedback.

​
Installation

This hook can be installed via the CLI: 
bunx --bun shadcn@latest add @kokonutui/use-copy-to-clipboard
Or manually copy the hook from /hooks/use-copy-to-clipboard.ts into your project.

​
Usage

import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";

function CodeBlock({ code }: { code: string }) {
  const { isCopied, copyToClipboard } = useCopyToClipboard();

  return (
    <div className="relative">
      <pre>{code}</pre>
      <button
        onClick={() => copyToClipboard(code)}
        className="absolute top-2 right-2"
      >
        {isCopied ? "Copied!" : "Copy"}
      </button>
    </div>
  );
}

​
API Reference

​
Parameters

The hook accepts an optional configuration object:
ParameterTypeDefaultDescription
timeoutnumber2000Duration in milliseconds before isCopied resets to false
onCopy() => voidundefinedOptional callback function to execute after successful copy

​
Return Value

Returns an object with:
PropertyTypeDescription
isCopiedbooleanWhether text was recently copied (true during timeout period)
copyToClipboard(value: string) => voidFunction to copy text to clipboard

​
Features

  • Automatic state management - isCopied automatically resets after timeout
  • Custom timeout - Configure how long the copied state persists
  • Callback support - Execute custom logic after copying
  • Browser compatibility check - Safely handles environments without clipboard API

​
Example with Custom Timeout

function MyComponent() {
  const { isCopied, copyToClipboard } = useCopyToClipboard({
    timeout: 3000, // 3 seconds
    onCopy: () => {
      console.log("Text copied!");
    },
  });

  return (
    <button onClick={() => copyToClipboard("Hello World")}>
      {isCopied ? "✓ Copied" : "Copy Text"}
    </button>
  );
}

​
Use Cases

  • Copy buttons for code blocks
  • Share link functionality
  • Copy API keys or tokens
  • Copy formatted text or JSON
  • Copy-to-clipboard for contact information

​
Notes

  • Requires modern browser with Clipboard API support
  • Only works in secure contexts (HTTPS or localhost)
  • Automatically handles server-side rendering (no errors)

Build docs developers (and LLMs) love

Get started for freeTalk to us