use_mouse_in_element
Reactive mouse position related to an element.
Demo
Usage
use leptos::prelude::*;
use leptos::html::Div;
use leptos_use_mouse_in_element::{use_mouse_in_element, UseMouseInElementReturn};
#[component]
fn Demo() -> impl IntoView {
let target = NodeRef::<Div>::new();
let UseMouseInElementReturn { x, y, is_outside, .. } = use_mouse_in_element(target);
view! {
<div node_ref=target>
<h1>Hello world</h1>
</div>
}
}SendWrapped Return
The returned closure stop is a sendwrapped function. It can
only be called from the same thread that called use_mouse_in_element.
Server-Side Rendering
Make sure you follow the instructions in Server-Side Rendering.
On the server this returns simple Signals with the initial_value for x and y,
no-op for stop, is_outside = true and 0.0 for the rest of the signals.
Installation
cargo add leptos-use-mouse-in-element
Options
UseMouseInElementOptions
Options for use_mouse_in_element_with_options.
Every option is set with a builder method of the same name, e.g. UseMouseInElementOptions::default().coord_type(...). See also the API docs.
coord_type
Type: UseMouseCoordType<Ex>
How to extract the x, y coordinates from mouse events or touches
target
Type: El
Listen events on target element. Defaults to window
touch
Type: bool
Listen to touchmove events. Defaults to true.
reset_on_touch_ends
Type: bool
Reset to initial value when touchend event fired. Defaults to false
initial_value
Type: Position
Initial values. Defaults to {x: 0.0, y: 0.0}.
handle_outside
Type: bool
If true updates the element_x and element_y signals even if the
mouse is outside of the element. If false it doesn’t update them when outside.
Defaults to true.