Loading...
Please waitLoading...
Please waitpnpm dlx uselab@latest add use-clipboard-history
import * as React from "react"
import { useClipboardHistory } from "@/hooks/use-clipboard-history"
export function ClipboardPanel() {
const { list, push, pull, clear } = useClipboardHistory({
size: 5,
secureClear: true,
})
const [value, setValue] = React.useState("")
return (
<div>
<textarea
value={value}
onChange={(event) => setValue(event.target.value)}
/>
<button onClick={() => push(value)}>Save snippet</button>
<button onClick={pull}>Capture clipboard</button>
<button onClick={clear}>Secure clear</button>
<ul>
{list.map((entry) => (
<li key={entry}>{entry}</li>
))}
</ul>
</div>
)
}| Name | Type | Description | Default Value | Optional |
|---|---|---|---|---|
options.size | number | Maximum number of entries to keep. | 10 | Yes |
options.storageKey | string | LocalStorage key used to persist history. | "usekit:clipboard-history" | Yes |
options.secureClear | boolean | When true, attempts to wipe the OS clipboard when clearing. | false | Yes |
options.dedupe | boolean | Remove duplicates and move re-inserted items to the front. | true | Yes |
| Name | Type | Description |
|---|---|---|
list | string[] | Ordered history (newest first). |
push(value) | (value: string) => void | Adds a value to history, applying dedupe and size constraints. |
pull() | () => Promise<void> | Reads navigator.clipboard and stores the text. |
clear() | () => Promise<void> | Clears history and optionally wipes the clipboard (if secureClear). |
localStorage to persist history between reloads.secureClear attempts to write an empty string to the clipboard, but browsers may block it without gesture.