fn

useClipboard

v0.0.14testeddemo

Reactive async Clipboard API.

Examples

ts
const { text, copy, copied, isSupported } = useClipboard();
copy('hello');
ts
// Copy a lazily/asynchronously resolved value
copy(async () => (await fetch('/token').then(r => r.text())));

Demo

Loading demo…

Signatures

ts
export function useClipboard(options?: UseClipboardOptions<undefined>): UseClipboardReturn<false>;
ts
export function useClipboard(options: UseClipboardOptions<MaybeRefOrGetter<string>>): UseClipboardReturn<true>;

Parameters

ParameterTypeDescription
options?UseClipboardOptions<MaybeRefOrGetter<string> | undefined>Options

Returns

UseClipboardReturn<boolean>isSupported, text, copied, copyPending, and copy
PropertyTypeDescription
isSupportedReadonly<Ref<boolean>>Whether the async Clipboard API is available
textReadonly<Ref<string>>The current clipboard text (kept in sync when read is enabled)
copiedReadonly<Ref<boolean>>true for copiedDuring ms after a successful copy
copyPendingReadonly<Ref<boolean>>true while an async copy() is in flight
copyOptional extends true ? (text?: ClipboardValue) => Promise<void> : (text: ClipboardValue) => Promise<void>Copy a value to the clipboard