Function use_visible

pub fn use_visible<'hook>(
    node: NodeRef,
    sticky: bool,
) -> impl 'hook + Hook<Output = bool>

Check if an element is visible. Internally, it uses an IntersectionObserver to receive notifications from the browser whenever the visibility state of the node changes.

Setting the sticky bit makes this hook disconnect the observer once the element is visible, and keep the visibility set to true, even when it becomes invisible. This is often desired for lazy-loading components.

Example

use yew_hooks::prelude::*;

#[function_component]
fn MyComponent() -> Html {
    let node = use_node_ref();
    let visible = use_visible(node.clone(), false);

    html! {
        <div ref={node}>
            if visible {
                <p>{"I'm visible!"}</p>
            } else {
                <p>{"I'm invisible!"}</p>
            }
        </div>
    }
}

Note

When used in function components and hooks, this hook is equivalent to:

pub fn use_visible(node: NodeRef, sticky: bool) -> bool {
    /* implementation omitted */
}