leptos_use

Function use_intersection_observer

Source 
pub fn use_intersection_observer<Els, M, F, RootM>(
    target: Els,
    callback: F,
) -> UseIntersectionObserverReturn<impl Fn() + Clone + Send + Sync, impl Fn() + Clone + Send + Sync, impl Fn() + Clone + Send + Sync>
where
    Els: IntoElementsMaybeSignal<Element, M>,
    F: FnMut(Vec<IntersectionObserverEntry>, IntersectionObserver) + 'static,
    Element: IntoElementMaybeSignal<Element, RootM>,
Expand description

Reactive IntersectionObserver.

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

§Demo

Link to Demo

§Usage

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