Function use_swipe

pub fn use_swipe<'hook>(
    node: NodeRef,
) -> impl 'hook + Hook<Output = UseSwipeHandle>

A sensor hook that detects swipe based on TouchEvent.

Example

use yew_hooks::prelude::*;

#[function_component(UseSwipe)]
fn swipe() -> Html {
    let node =  use_node_ref();
    let state = use_swipe(node.clone());

    // You can depend on direction/swiping etc.
    {
        let state = state.clone();
        use_effect_with(state.direction, move |direction| {
            // Do something based on direction.
            match **direction {
                UseSwipeDirection::Left => (),
                UseSwipeDirection::Right => (),
                UseSwipeDirection::Up => (),
                UseSwipeDirection::Down => (),
                _ => (),
            }
            || ()
        });
    }
    
    html! {
        <div ref={node}>
            <b>{ " swiping: " }</b>
            { *state.swiping }
            <b>{ " direction: " }</b>
            { format!("{:?}", *state.direction) }
            <b>{ " coords_start: " }</b>
            { format!("{:?}", *state.coords_start) }
            <b>{ " coords_end: " }</b>
            { format!("{:?}", *state.coords_end) }
            <b>{ " length_x: " }</b>
            { *state.length_x }
            <b>{ " length_y: " }</b>
            { *state.length_y }
        </div>
    }
}

Note

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

pub fn use_swipe(node: NodeRef) -> UseSwipeHandle {
    /* implementation omitted */
}