use_intersection_observer

Usage

use leptos::prelude::*;
use leptos::html::Div;
use leptos_use_intersection_observer::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

Make sure you follow the instructions in Server-Side Rendering.

On the server this amounts to a no-op.

Installation

cargo add leptos-use-intersection-observer

Options

`UseIntersectionObserverOptions`

Options for use_intersection_observer_with_options.

Every option is set with a builder method of the same name, e.g. UseIntersectionObserverOptions::default().immediate(...). See also the API docs.

If true, the IntersectionObserver will be attached immediately. Otherwise it will only be attached after the returned resume closure is called. That is use_intersections_observer will be started “paused”.

`root`

Type: Option<El>

A web_sys::Element or web_sys::Document object which is an ancestor of the intended target, whose bounding rectangle will be considered the viewport. Any part of the target not visible in the visible area of the root is not considered visible. Defaults to None (which means the root document will be used). Please note that setting this to a Some(document) may not be supported by all browsers. See Browser Compatibility

`root_margin`

Type: String

A string which specifies a set of offsets to add to the root’s bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The syntax is approximately the same as that for the CSS margin property; see The intersection root and root margin for more information on how the margin works and the syntax. The default is "0px".

`thresholds`

Type: Vec<f64>

A Vec of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target. A value of 0.0 means that even a single visible pixel counts as the target being visible. 1.0 means that the entire target element is visible. See Thresholds for a more in-depth description of how thresholds are used. The default is a single threshold of [0.0].

Source

Source • Demo • Docs

Keyboard shortcuts