use_element_visibility

Usage

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

Installation

cargo add leptos-use-element-visibility

Options

`UseElementVisibilityOptions`

Options for use_element_visibility_with_options.

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

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

Source

Source • Demo • Docs

Keyboard shortcuts