leptos_use/
use_element_visibility.rs

1use crate::core::IntoElementMaybeSignal;
2use cfg_if::cfg_if;
3use default_struct_builder::DefaultBuilder;
4use leptos::prelude::*;
5use std::marker::PhantomData;
6
7#[cfg(not(feature = "ssr"))]
8use crate::{UseIntersectionObserverOptions, use_intersection_observer_with_options};
9use leptos::reactive::wrappers::read::Signal;
10
11/// Tracks the visibility of an element within the viewport.
12///
13/// ## Demo
14///
15/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_element_visibility)
16///
17/// ## Usage
18///
19/// ```
20/// # use leptos::prelude::*;
21/// # use leptos::html::Div;
22/// # use leptos_use::use_element_visibility;
23/// #
24/// # #[component]
25/// # fn Demo() -> impl IntoView {
26/// let el = NodeRef::<Div>::new();
27///
28/// let is_visible = use_element_visibility(el);
29///
30/// view! {
31///     <div node_ref=el>
32///         <h1>{is_visible}</h1>
33///     </div>
34/// }
35/// # }
36/// ```
37///
38/// ## Server-Side Rendering
39///
40/// > Make sure you follow the [instructions in Server-Side Rendering](https://leptos-use.rs/server_side_rendering.html).
41///
42/// On the server this returns a `Signal` that always contains the value `false`.
43///
44/// ## See also
45///
46/// * [`fn@crate::use_intersection_observer`]
47pub fn use_element_visibility<El, M>(target: El) -> Signal<bool>
48where
49    El: IntoElementMaybeSignal<web_sys::Element, M>,
50{
51    use_element_visibility_with_options::<El, M, web_sys::Element, _>(
52        target,
53        UseElementVisibilityOptions::default(),
54    )
55}
56
57/// Version of [`use_element_visibility`] with that takes a `UseElementVisibilityOptions`. See [`use_element_visibility`] for how to use.
58#[cfg_attr(feature = "ssr", allow(unused_variables))]
59pub fn use_element_visibility_with_options<El, M, ContainerEl, ContainerM>(
60    target: El,
61    options: UseElementVisibilityOptions<ContainerEl, ContainerM>,
62) -> Signal<bool>
63where
64    El: IntoElementMaybeSignal<web_sys::Element, M>,
65    ContainerEl: IntoElementMaybeSignal<web_sys::Element, ContainerM>,
66{
67    let (is_visible, set_visible) = signal(false);
68
69    cfg_if! { if #[cfg(not(feature = "ssr"))] {
70        use_intersection_observer_with_options(
71            target.into_element_maybe_signal(),
72            move |entries, _| {
73                // In some circumstances Chrome passes a first (or only) entry which has a zero bounding client rect
74                // and returns `is_intersecting` erroneously as `false`.
75                if let Some(entry) = entries.into_iter().find(|entry| {
76                    let rect = entry.bounding_client_rect();
77                    rect.width() > 0.0 || rect.height() > 0.0
78                }) {
79                    set_visible.set(entry.is_intersecting());
80                }
81            },
82            UseIntersectionObserverOptions::default().root(options.viewport),
83        );
84    }}
85
86    is_visible.into()
87}
88
89/// Options for [`use_element_visibility_with_options`].
90#[derive(DefaultBuilder)]
91pub struct UseElementVisibilityOptions<El, M>
92where
93    El: IntoElementMaybeSignal<web_sys::Element, M>,
94{
95    /// A `web_sys::Element` or `web_sys::Document` object which is an ancestor of the intended `target`,
96    /// whose bounding rectangle will be considered the viewport.
97    /// Any part of the target not visible in the visible area of the `root` is not considered visible.
98    /// Defaults to `None` (which means the root `document` will be used).
99    /// Please note that setting this to a `Some(document)` may not be supported by all browsers.
100    /// See [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#browser_compatibility)
101    #[cfg_attr(feature = "ssr", allow(dead_code))]
102    viewport: Option<El>,
103
104    #[builder(skip)]
105    _marker: PhantomData<M>,
106}
107
108impl<M> Default for UseElementVisibilityOptions<web_sys::Element, M>
109where
110    web_sys::Element: IntoElementMaybeSignal<web_sys::Element, M>,
111{
112    fn default() -> Self {
113        Self {
114            viewport: None,
115            _marker: PhantomData,
116        }
117    }
118}
leptos_use/use_element_visibility.rs

leptos_use/
use_element_visibility.rs
