use_intersection_observer

Reactive IntersectionObserver.

Detects that a target element's visibility inside the viewport.

Demo

Usage

use leptos::prelude::*;
use leptos::html::Div;
use leptos_use::use_intersection_observer;

#[component]
fn Demo() -> impl IntoView {
let el = NodeRef::<Div>::new();
let (is_visible, set_visible) = 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>
}
}

SendWrapped Return

The returned closures pause, resume and stop are sendwrapped functions. They can only be called from the same thread that called use_intersection_observer.

Server-Side Rendering

On the server this amounts to a no-op.

See also

• use_element_visibility

Feature

This function is only available if the crate feature use_intersection_observer is enabled

Types

• struct UseIntersectionObserverOptions
• struct UseIntersectionObserverReturn

Source

Source • Demo • Docs