use_mouse_in_element
Reactive mouse position related to an element.
Demo
Usage
use leptos::prelude::*;
use leptos::html::Div;
use leptos_use::{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
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.
Feature
This function is only available if the crate feature
use_mouse_in_element
is enabled