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/utils/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 m-auto -ml-0.5 inline-flex size-8 border 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/utils/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 1/29/2026