leptos_use/
use_window_focus.rs

1#![cfg_attr(feature = "ssr", allow(unused_variables, unused_imports))]
2
3use crate::{UseEventListenerOptions, use_event_listener_with_options};
4use cfg_if::cfg_if;
5use leptos::ev::{blur, focus};
6use leptos::prelude::*;
7
8/// Reactively track window focus
9/// with `window.onfocus` and `window.onblur` events.
10///
11/// ## Demo
12///
13/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_window_focus)
14///
15/// ## Usage
16///
17/// ```
18/// # use leptos::prelude::*;
19/// # use leptos_use::use_window_focus;
20/// #
21/// # #[component]
22/// # fn Demo() -> impl IntoView {
23/// let focused = use_window_focus();
24/// #
25/// # view! { }
26/// # }
27/// ```
28///
29/// ## Server-Side Rendering
30///
31/// > Make sure you follow the [instructions in Server-Side Rendering](https://leptos-use.rs/server_side_rendering.html).
32///
33/// On the server this returns a `Signal` that is always `true`.
34pub fn use_window_focus() -> Signal<bool> {
35    cfg_if! { if #[cfg(feature = "ssr")] {
36        let initial_focus = true;
37    } else {
38        let initial_focus = document().has_focus().unwrap_or_default();
39    }}
40
41    let (focused, set_focused) = signal(initial_focus);
42
43    cfg_if! { if #[cfg(not(feature = "ssr"))] {
44        let listener_options = UseEventListenerOptions::default().passive(true);
45        let _ = use_event_listener_with_options(
46            window(),
47            blur,
48            move |_| set_focused.set(false),
49            listener_options,
50        );
51        let _ = use_event_listener_with_options(
52            window(),
53            focus,
54            move |_| set_focused.set(true),
55            listener_options,
56        );
57    }}
58
59    focused.into()
60}
leptos_use/use_window_focus.rs

leptos_use/
use_window_focus.rs
