use_clipboard
Reactive Clipboard API.
Provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Access to the contents of the clipboard is gated behind the Permissions API. Without user permission, reading or altering the clipboard contents is not permitted.
Demo
Usage
use leptos::prelude::*;
use leptos_use_clipboard::{use_clipboard, UseClipboardReturn};
#[component]
fn Demo() -> impl IntoView {
let UseClipboardReturn { is_supported, text, copied, copy } = use_clipboard();
view! {
<Show
when=move || is_supported.get()
fallback=move || view! { <p>Your browser does not support Clipboard API</p> }
>
<button on:click={
let copy = copy.clone();
move |_| copy("Hello!")
}>
<Show when=move || copied.get() fallback=move || "Copy">
"Copied!"
</Show>
</button>
</Show>
}
}SendWrapped Return
The returned closures copy is a sendwrapped function. It can
only be called from the same thread that called use_clipboard.
Server-Side Rendering
Make sure you follow the instructions in Server-Side Rendering.
On the server the returnd text signal will always be None and copy is a no-op.
Installation
cargo add leptos-use-clipboard
Options
UseClipboardOptions
Options for use_clipboard_with_options.
Every option is set with a builder method of the same name, e.g. UseClipboardOptions::default().read(...). See also the API docs.
read
Type: bool
When true event handlers are added so that the returned signal text is updated whenever the clipboard changes.
Defaults to false.
Please note that clipboard changes are only detected when copying or cutting text inside the same document.
copied_reset_delay
Type: f64
After how many milliseconds after copying should the returned signal copied be set to false?
Defaults to 1500.