use_drop

Function use_drop 

Source
pub fn use_drop<'hook>(
    node: NodeRef,
) -> impl 'hook + Hook<Output = UseDropHandle>
Expand description

This hook tracks file, link and copy-paste drops.

§Example

use yew_hooks::prelude::*;

#[function_component(UseDrop)]
fn drop() -> Html {
    let node = use_node_ref();
    let state = use_drop(node.clone());

    html! {
        <div ref={node}>
            <p><b>{ " Files: " }</b></p>
            {if let Some(files) = &*state.files {
                html! {for file in files.iter() {
                    <p> { file.name() }</p>
                } }
            } else {
                html! {}
            }}
            <p><b>{ " Text: " }</b></p>
            {if let Some(text) = &*state.text {
                html! {<p>{ text }</p>}
            } else {
                html! {}
            }}
            <p><b>{ " Uri: " }</b></p>
            {if let Some(uri) = &*state.uri {
                html! {<p>{ uri }</p>}
            } else {
                html! {}
            }}
            <p>
                { "Try to drag & drop or copy & paste something here, e.g. files, links or text" }
            </p>
        </div>
    }
}

§Note

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

/// This hook tracks file, link and copy-paste drops.
///
/// # Example
///
/// ```rust
/// # use yew::prelude::*;
/// #
/// use yew_hooks::prelude::*;
///
/// #[function_component(UseDrop)]
/// fn drop() -> Html {
///     let node = use_node_ref();
///     let state = use_drop(node.clone());
///
///     html! {
///         <div ref={node}>
///             <p><b>{ " Files: " }</b></p>
///             {if let Some(files) = &*state.files {
///                 html! {for file in files.iter() {
///                     <p> { file.name() }</p>
///                 } }
///             } else {
///                 html! {}
///             }}
///             <p><b>{ " Text: " }</b></p>
///             {if let Some(text) = &*state.text {
///                 html! {<p>{ text }</p>}
///             } else {
///                 html! {}
///             }}
///             <p><b>{ " Uri: " }</b></p>
///             {if let Some(uri) = &*state.uri {
///                 html! {<p>{ uri }</p>}
///             } else {
///                 html! {}
///             }}
///             <p>
///                 { "Try to drag & drop or copy & paste something here, e.g. files, links or text" }
///             </p>
///         </div>
///     }
/// }
/// ```
pub fn use_drop(node: NodeRef) -> UseDropHandle {
    /* implementation omitted */
}