Skip to main content

use_long_press

Function use_long_press 

Source
pub fn use_long_press<'hook, F>(
    node: NodeRef,
    threshold: u32,
    onlongpress: F,
) -> impl 'hook + Hook<Output = UseLongPressHandle>
where F: FnMut(MouseEvent) + 'static + 'hook,
Expand description

A hook that detects when a user presses and holds an element for a specified duration.

§Example

use yew_hooks::prelude::*;

#[function_component(UseLongPress)]
fn long_press() -> Html {
    let button = use_node_ref();

    let long_press = use_long_press(button.clone(), 1000, move |e: MouseEvent| {
        debug!("Long pressed for 1 second!");
    });

    let onmouseup = {
        let long_press = long_press.clone();
        Callback::from(move |_| {
            long_press.cancel();
        })
    };

    html! {
        <>
            <button
                ref={button}
                onmouseup={onmouseup}
            >
                { "Press and hold me for 1 second" }
            </button>
            <p>
                { if *long_press.pressing { "Pressing..." } else { "Not pressing" } }
            </p>
            <p>
                { if *long_press.long_pressed { "Long pressed!" } else { "Not long pressed yet" } }
            </p>
        </>
    }
}

§Note

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

/// A hook that detects when a user presses and holds an element for a specified duration.
///
/// # Example
///
/// ```rust
/// # use yew::prelude::*;
/// # use log::debug;
/// #
/// use yew_hooks::prelude::*;
///
/// #[function_component(UseLongPress)]
/// fn long_press() -> Html {
///     let button = use_node_ref();
///
///     let long_press = use_long_press(button.clone(), 1000, move |e: MouseEvent| {
///         debug!("Long pressed for 1 second!");
///     });
///
///     let onmouseup = {
///         let long_press = long_press.clone();
///         Callback::from(move |_| {
///             long_press.cancel();
///         })
///     };
///
///     html! {
///         <>
///             <button
///                 ref={button}
///                 onmouseup={onmouseup}
///             >
///                 { "Press and hold me for 1 second" }
///             </button>
///             <p>
///                 { if *long_press.pressing { "Pressing..." } else { "Not pressing" } }
///             </p>
///             <p>
///                 { if *long_press.long_pressed { "Long pressed!" } else { "Not long pressed yet" } }
///             </p>
///         </>
///     }
/// }
/// ```
pub fn use_long_press<F>(
    node: NodeRef,
    threshold: u32,
    onlongpress: F,
) -> UseLongPressHandle
where
    F: FnMut(MouseEvent) + 'static,
{
    /* implementation omitted */
}