use-copy-to-clipboard

PreviousNext
Docs
reuihook

Preview

Loading preview…
registry/default/hooks/use-copy-to-clipboard.ts
'use client';

import * as React from 'react';

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

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

    if (!value) return;

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

      if (onCopy) {
        onCopy();
      }

      setTimeout(() => {
        setCopied(false);
      }, timeout);
    }, console.error);
  };

  return { copied, copy };
}

Installation

npx shadcn@latest add @reui/use-copy-to-clipboard

Usage

import { UseCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
const value = UseCopyToClipboard()