React useCopyToClipboard Hook

Ever built a "Copy" button and realized you need to handle the clipboard API, show feedback, reset the state after a delay, and deal with browser compatibility? You know the drill—navigator.clipboard, try-catch blocks, setTimeout cleanups. This free open source React useCopyToClipboard custom hook handles all that clipboard complexity so you can focus on your UI instead of wrestling with browser APIs in your React applications.

useCopyToClipboard showcase

One-click copying with automatic success feedback:

"use client";import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";import { toast } from "sonner";import { Button } from "@/components/ui/button";import { Badge } from "@/components/ui/badge";import { Label } from "@/components/ui/label";import { useCopyToClipboard } from "@/components/ui/shadcn-io/use-copy-to-clipboard";export default function UseCopyToClipboardDemo() {  const [copy, isCopied] = useCopyToClipboard();  return (    <div className="p-6 max-w-sm mx-auto space-y-6">      {/* Header */}      <div className="text-center space-y-2">        <h3 className="text-lg font-semibold">Copy to Clipboard Demo</h3>        <p className="text-sm text-muted-foreground">Basic useCopyToClipboard hook functionality</p>      </div>            {/* Status Display */}      <div className="text-center space-y-3">        <Label className="text-sm font-medium">Clipboard Status</Label>        <div className="min-h-[32px] flex items-center justify-center">          <Badge             variant={isCopied ? "default" : "secondary"}             className="text-base px-4 py-2 font-semibold w-24 justify-center"          >            {isCopied ? 'Copied!' : 'Ready'}          </Badge>        </div>      </div>      {/* Copy Button - Fixed height container to prevent layout shift */}      <div className="space-y-2">        <div className="min-h-[36px] flex items-center">          <Button            variant="outline"            className="w-full gap-2 text-sm h-9"            onClick={() =>              copy("Hello world").then(() =>                toast("Text Copied to your clipboard 🎉.")              )            }          >            Click me to copy            {isCopied ? (              <ClipboardCheckIcon size={16} />            ) : (              <ClipboardIcon size={16} />            )}          </Button>        </div>      </div>      {/* Current Value Display - Fixed height to prevent shift */}      <div className="text-center min-h-[20px] flex items-center justify-center">        <div className="text-xs text-muted-foreground">          Text to copy: <code className="bg-muted px-1 py-0.5 rounded text-xs">Hello world</code>        </div>      </div>    </div>  );}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

This free open source React hook simplifies clipboard operations with TypeScript support for modern JavaScript applications. Whether you're building code snippets, share buttons, or API key displays in your Next.js projects, this React hook keeps your copy functionality clean and reliable.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/use-copy-to-clipboard.json

npx shadcn@latest add https://www.shadcn.io/registry/use-copy-to-clipboard.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-copy-to-clipboard.json

bunx shadcn@latest add https://www.shadcn.io/registry/use-copy-to-clipboard.json

Why most clipboard implementations suck

Look, you could manually call navigator.clipboard.writeText(), manage your own success state, and set up timeouts to reset feedback in React applications. But after debugging the third "why isn't my feedback clearing" bug, you'll appreciate having this handled properly.

Most developers forget to clean up timeouts, leaving "Copied!" messages stuck forever in their React components. Or they don't handle the clipboard API promise properly and wonder why their error handling doesn't work in Next.js projects. Some skip HTTPS requirements and can't figure out why copying fails in production.

The React hook automatically manages the success state lifecycle—copy triggers success, and it auto-resets after 2 seconds. No more forgotten clearTimeout calls or stuck "Copied!" messages in TypeScript components.

Plus it handles the promise properly, so you can chain operations or show toast notifications on success in JavaScript applications.

This free open source React hook handles the clipboard boilerplate while you focus on building features. Whether you're creating React applications, Next.js projects, or TypeScript codebases, this custom hook keeps your copy operations smooth.

Features

• Async clipboard API with modern navigator.clipboard.writeText() method in React applications
• Automatic feedback state with temporary success indicator for user experience in TypeScript components
• Error handling with console warnings for unsupported browsers in Next.js projects
• Auto-reset timer that clears copied state after 2 seconds automatically
• TypeScript support with complete type definitions for return tuple
• Promise-based API for chaining operations and handling success/failure in JavaScript frameworks
• Free open source designed for modern React development workflows

When you'll actually use this

Real talk—this isn't for every text selection in React applications. For basic copy-paste, users know Ctrl+C. But when you need programmatic copying with feedback, this React hook shines in Next.js projects.

Perfect for:

• Copy buttons - Add one-click copying functionality to buttons built with Next.js and TypeScript
• Code snippets - Enable easy copying of code blocks using React patterns
• Share links - Copy URLs and sharing links with user feedback indicators in JavaScript applications
• Text inputs - Add copy functionality to form inputs and text areas in React components
• API keys - Secure copying of sensitive information with temporary feedback in TypeScript projects
• Documentation - Copy code examples and commands in technical docs built with React

Common gotchas

HTTPS is not optional: The clipboard API only works in secure contexts (HTTPS or localhost) in React applications. On HTTP sites, it'll fail silently or throw errors. This trips up developers moving from localhost to staging environments.

User interaction is mandatory: You can't trigger clipboard operations without user interaction in Next.js projects—browser security prevents auto-copying. The copy must be triggered by a click or keypress in TypeScript components.

The 2-second reset is hardcoded: The success state auto-clears after 2 seconds in JavaScript applications. If you need different timing, you'll need to fork the hook or manage state separately in React projects.

Browser support gaps exist: Modern browsers support navigator.clipboard, but older ones don't in TypeScript implementations. The hook includes a compatibility check and console warning.

Forgotten timeout cleanup: Most manual implementations forget to clear timeouts when components unmount, causing memory leaks. This React hook handles cleanup automatically.

API Reference

useCopyToClipboard

Returns a tuple with copy function and copied state boolean.

Related hooks you will also like

Questions you might have