fn
useClipboardItems
v0.0.14testeddemoReactive async Clipboard API with rich ClipboardItem support
(read/write images, HTML, and arbitrary MIME types — not just text).
SSR-safe; uses passive copy/cut listeners and guards stale async writes.
Examples
ts
const { content, copy, copied, isSupported } = useClipboardItems();
copy([new ClipboardItem({ 'text/plain': new Blob(['hello'], { type: 'text/plain' }) })]);ts
// Copy a lazily/asynchronously resolved value, kept in sync with the system clipboard
const { content } = useClipboardItems({ read: true });
copy(async () => buildClipboardItems());Demo
Loading demo…
Signatures
ts
export function useClipboardItems(options?: UseClipboardItemsOptions<undefined>): UseClipboardItemsReturn<false>;ts
export function useClipboardItems(options: UseClipboardItemsOptions<MaybeRefOrGetter<ClipboardItems>>): UseClipboardItemsReturn<true>;Parameters
| Parameter | Type | Description |
|---|---|---|
options? | UseClipboardItemsOptions<MaybeRefOrGetter<ClipboardItems> | undefined> | Options |
Returns
UseClipboardItemsReturn<boolean>isSupported, content, copied, copyPending, copy, and read| Property | Type | Description |
|---|---|---|
isSupported | Readonly<Ref<boolean>> | Whether the async Clipboard API (with ClipboardItem) is available |
content | Readonly<Ref<ClipboardItems>> | The current clipboard items (kept in sync when read is enabled) |
copied | Readonly<Ref<boolean>> | true for copiedDuring ms after a successful copy |
copyPending | Readonly<Ref<boolean>> | true while an async copy() is in flight |
copy | Optional extends true ? (content?: ClipboardItemsValue) => Promise<void> : (content: ClipboardItemsValue) => Promise<void> | Copy clipboard items to the system clipboard |
read | () => Promise<void> | Manually read the system clipboard into content |