# useCopyToClipboard

A small hook that copies text and tracks the latest copy result.

## Installation

```bash
npx shadcn@latest add https://underscore-cn.vercel.app/r/use-copy-to-clipboard.json
```

[Registry JSON](https://underscore-cn.vercel.app/r/use-copy-to-clipboard.json)

## Preview

```tsx
import { Button } from "@/components/ui/button";

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

export function Preview() {
  const copyState = useCopyToClipboard();
  const copyValue = "npx shadcn@latest add https://example.com/r/example-card.json";

  return (
    <div className="flex flex-col items-center gap-3 text-center">
      <Button onClick={() => void copyState.copy(copyValue)}>Copy example command</Button>
      <p className="text-sm text-muted-foreground">
        {copyState.status === "copied" ? "Copied to clipboard." : "Ready to copy."}
      </p>
    </div>
  );
}
```

## Source

### registry/items/hooks/use-copy-to-clipboard/use-copy-to-clipboard.ts

```ts
"use client";

import * as React from "react";

type CopyState =
  | {
      status: "idle";
      value: null;
      error: null;
    }
  | {
      status: "copied";
      value: string;
      error: null;
    }
  | {
      status: "error";
      value: null;
      error: Error;
    };

function useCopyToClipboard() {
  const [state, setState] = React.useState<CopyState>({
    status: "idle",
    value: null,
    error: null,
  });

  const copy = React.useCallback(async (value: string) => {
    try {
      await navigator.clipboard.writeText(value);
      setState({ status: "copied", value, error: null });
      return true;
    } catch (error) {
      const copyError = error instanceof Error ? error : new Error("Copy failed.");

      setState({ status: "error", value: null, error: copyError });
      return false;
    }
  }, []);

  const reset = React.useCallback(() => {
    setState({ status: "idle", value: null, error: null });
  }, []);

  return { ...state, copy, reset };
}

export { useCopyToClipboard, type CopyState };
```


## Usage

Call `copy` with the text you want to place on the clipboard. The hook exposes the latest copy
status so your UI can respond after the operation completes.

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

export function CopyButton() {
  const copyState = useCopyToClipboard();

  return (
    <button onClick={() => void copyState.copy("Copied from my app")}>
      {copyState.status === "copied" ? "Copied" : "Copy"}
    </button>
  );
}
```