use_intersection_observer
Reactive IntersectionObserver.
Detects that a target element's visibility inside the viewport.
Demo
Usage
use leptos::*;
use leptos::html::Div;
use leptos_use::use_intersection_observer;
#[component]
fn Demo() -> impl IntoView {
let el = create_node_ref::<Div>();
let (is_visible, set_visible) = create_signal(false);
use_intersection_observer(
el,
move |entries, _| {
set_visible.set(entries[0].is_intersecting());
},
);
view! {
<div node_ref=el>
<h1>"Hello World"</h1>
</div>
}
}Server-Side Rendering
On the server this amounts to a no-op.