use_element_visibility

Tracks the visibility of an element within the viewport.

Demo

Usage

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

#[component]
fn Demo() -> impl IntoView {
let el = NodeRef::<Div>::new();

let is_visible = use_element_visibility(el);

view! {
    <div node_ref=el>
        <h1>{is_visible}</h1>
    </div>
}
}

Server-Side Rendering

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

On the server this returns a Signal that always contains the value false.

See also

• use_intersection_observer

Feature

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

Types

• struct UseElementVisibilityOptions

Source

Source • Demo • Docs