Function use_clipboard

pub fn use_clipboard<'hook>() -> impl 'hook + Hook<Output = UseClipboardHandle>

This hook is used to read from or write to clipboard for text or bytes. e.g. copy plain text or copy image/png file to clipboard.

Example

use yew_hooks::prelude::*;

#[function_component(UseClipboard)]
fn clipboard() -> Html {
    let clipboard = use_clipboard();

    let onclick_write_text = {
        let clipboard = clipboard.clone();
        Callback::from(move |_| {
            clipboard.write_text("hello world!".to_owned());
        })
    };
    let onclick_read_text = {
        let clipboard = clipboard.clone();
        Callback::from(move |_| {
            clipboard.read_text();
        })
    };
    let onclick_write_bytes = {
        let clipboard = clipboard.clone();
        Callback::from(move |_| {
            clipboard.write(vec![], Some("image/png".to_owned()));
        })
    };
    let onclick_read_bytes = {
        let clipboard = clipboard.clone();
        Callback::from(move |_| {
            clipboard.read();
        })
    };
    
    html! {
        <div>
            <button onclick={onclick_write_text}>{ "Write text to clipboard" }</button>
            <button onclick={onclick_read_text}>{ "Read text from clipboard" }</button>
            <button onclick={onclick_write_bytes}>{ "Write bytes to clipboard" }</button>
            <button onclick={onclick_read_bytes}>{ "Read bytes from clipboard" }</button>
            <p>{ format!("Current text: {:?}", *clipboard.text) }</p>
            <p>{ format!("Copied: {:?}", *clipboard.copied) }</p>
            <p>{ format!("Is supported: {:?}", *clipboard.is_supported) }</p>
            <p>{ format!("Current bytes: {:?}", *clipboard.bytes) }</p>
            <p>{ format!("Current bytes mime type: {:?}", *clipboard.bytes_mime_type) }</p>
        </div>
    }
}

Note

When used in function components and hooks, this hook is equivalent to:

pub fn use_clipboard() -> UseClipboardHandle {
    /* implementation omitted */
}