use_mouse_in_element
Reactive mouse position related to an element.
Demo
Usage
use leptos::*;
use leptos::html::Div;
use leptos_use::{use_mouse_in_element, UseMouseInElementReturn};
#[component]
fn Demo() -> impl IntoView {
let target = create_node_ref::<Div>();
let UseMouseInElementReturn { x, y, is_outside, .. } = use_mouse_in_element(target);
view! {
<div node_ref=target>
<h1>Hello world</h1>
</div>
}
}
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