# useCopyToClipboard

> Copy text to the clipboard, tracking the last copied value.

- Category: DOM
- Package: `hookli` (install with `npm i hookli`)
- Docs: https://hookli.vercel.app/docs/use-copy-to-clipboard

## Signature

```ts
useCopyToClipboard(): [CopiedValue, CopyFn]
```

## Returns

- `[0] copiedText`: `CopiedValue` — The last successfully-copied string, or null before any copy or after a failed one.
- `[1] copy`: `CopyFn` — Writes text to the clipboard. Resolves true on success, false when the API is unavailable or the write is rejected.

## Types

### CopiedValue

- `value`: `string | null` — The tracked copied text, or null.

### CopyFn

- `value`: `(text: string) => Promise<boolean>` — Copies text and reports whether the write succeeded.

## Usage

```tsx
import { useCopyToClipboard } from "hookli";

export function Demo() {
  const [copiedText, copy] = useCopyToClipboard();

  return (
    <button type="button" onClick={() => copy("npm i hookli")}>
      {copiedText ? "Copied!" : "Copy"}
    </button>
  );
}
```

## Source

`src/hooks/use-copy-to-clipboard/use-copy-to-clipboard.ts`

```ts
import { useCallback, useState } from "react";

type CopiedValue = string | null;
type CopyFn = (text: string) => Promise<boolean>;
type UseCopyToClipboardReturn = [CopiedValue, CopyFn];

export function useCopyToClipboard(): UseCopyToClipboardReturn {
  const [copiedText, setCopiedText] = useState<CopiedValue>(null);

  const copy: CopyFn = useCallback(async (text) => {
    if (typeof navigator === "undefined" || !navigator.clipboard) {
      return false;
    }

    try {
      await navigator.clipboard.writeText(text);
      setCopiedText(text);
      return true;
    } catch {
      setCopiedText(null);
      return false;
    }
  }, []);

  return [copiedText, copy];
}
```