Hooks

Use Copy To Clipboard

A simple hook to copy to clipboard.

Copy to your clipboard by just clicking on the button ->

'use client';

import { Button } from '@kit/ui/button';
import { useCopyToClipboard } from '@kit/ui/hooks/use-copy-to-clipboard';
import { Check, Copy } from 'lucide-react';

const TEXT_TO_COPY = 'Copy to your clipboard by just clicking on the button ->';

export function UseCopyToClipboardDemo() {
    const { copyToClipboard, isCopied } = useCopyToClipboard();

    return (
        <div className="bg-surface flex flex-wrap items-center justify-between gap-2 rounded-lg border p-4">
            <span>{TEXT_TO_COPY}</span>
            <Button
                variant="secondary"
                aria-label="Copy to clipboard"
                size="sm"
                className="peer border -ml-0.5 inline-flex m-auto size-8 shadow-none md:size-7 md:text-[0.8rem]"
                onClick={() => copyToClipboard(TEXT_TO_COPY)}
            >
                {isCopied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
                <span className="sr-only">Copy to clipboard</span>
            </Button>
        </div>
    );
}

Installation

Copy and paste the following code into your project.

hooks/use-copy-to-clipboard.ts

"use client"

import * as React from "react"

export function useCopyToClipboard({
  timeout = 2000,
  onCopy,
}: {
  timeout?: number
  onCopy?: () => void
} = {}) {
  const [isCopied, setIsCopied] = React.useState(false)

  const copyToClipboard = (value: string) => {
    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
      return
    }

    if (!value) return

    navigator.clipboard.writeText(value).then(() => {
      setIsCopied(true)

      if (onCopy) {
        onCopy()
      }

      if (timeout !== 0) {
        setTimeout(() => {
          setIsCopied(false)
        }, timeout)
      }
    }, console.error)
  }

  return { isCopied, copyToClipboard }
}

Usage

import { useCopyToClipboard } from '@kit/ui/hooks/use-copy-to-clipboard';

const { copyToClipboard, isCopied } = useCopyToClipboard();
 
return (
    <Button
        aria-label="Copy to clipboard"
        onClick={() => copyToClipboard(TEXT_TO_COPY)}
    >
        {isCopied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
    </Button>
)

API Reference

Nothing special here.

Device Mockup

An animated mockup to switch and render macOS, iPhone and Android devices.

Delay

Delay your react states.

How is this guide?

Last updated on 10/17/2025