leptos_use/
use_window_size.rs

1use crate::core::Size;
2use crate::{
3    use_event_listener_with_options, use_media_query, use_window, UseEventListenerOptions,
4};
5use default_struct_builder::DefaultBuilder;
6use leptos::ev::resize;
7use leptos::prelude::*;
8
9/// Reactive window size.
10///
11/// ## Demo
12///
13/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_window_size)
14///
15/// ## Usage
16///
17/// ```
18/// # use leptos::*;
19/// # use leptos_use::{use_window_size, UseWindowSizeReturn};
20/// #
21/// # #[component]
22/// # fn Demo() -> impl IntoView {
23/// let UseWindowSizeReturn { width, height } = use_window_size();
24/// #
25/// # view! { }
26/// # }
27/// ```
28///
29/// ## Server-Side Rendering
30///
31/// On the server the width and height are always `initial_size` which defaults to
32/// `Size { width: INFINITY, height: INFINITY }`.
33// #[doc(cfg(feature = "use_window_size"))]
34pub fn use_window_size() -> UseWindowSizeReturn {
35    use_window_size_with_options(UseWindowSizeOptions::default())
36}
37
38/// Version of [`fn@crate::use_window_size`] that takes a `UseWindowSizeOptions`. See [`fn@crate::use_window_size`] for how to use.
39// #[doc(cfg(feature = "use_window_size"))]
40pub fn use_window_size_with_options(options: UseWindowSizeOptions) -> UseWindowSizeReturn {
41    let UseWindowSizeOptions {
42        initial_size,
43        listen_orientation,
44        include_scrollbar,
45        measure_type,
46    } = options;
47
48    let (width, set_width) = signal(initial_size.width);
49    let (height, set_height) = signal(initial_size.height);
50
51    let update;
52
53    #[cfg(not(feature = "ssr"))]
54    {
55        update = move || match measure_type {
56            MeasureType::Outer => {
57                set_width.set(
58                    window()
59                        .outer_width()
60                        .expect("failed to get window width")
61                        .as_f64()
62                        .expect("width is not a f64"),
63                );
64                set_height.set(
65                    window()
66                        .outer_height()
67                        .expect("failed to get window height")
68                        .as_f64()
69                        .expect("height is not a f64"),
70                );
71            }
72            MeasureType::Inner => {
73                if include_scrollbar {
74                    set_width.set(
75                        window()
76                            .inner_width()
77                            .expect("failed to get window width")
78                            .as_f64()
79                            .expect("width is not a f64"),
80                    );
81                    set_height.set(
82                        window()
83                            .inner_height()
84                            .expect("failed to get window height")
85                            .as_f64()
86                            .expect("height is not a f64"),
87                    );
88                } else {
89                    set_width.set(
90                        document()
91                            .document_element()
92                            .expect("no document element")
93                            .client_width() as f64,
94                    );
95                    set_height.set(
96                        document()
97                            .document_element()
98                            .expect("no document element")
99                            .client_height() as f64,
100                    );
101                }
102            }
103        };
104    }
105
106    #[cfg(feature = "ssr")]
107    {
108        update = || {};
109
110        let _ = initial_size;
111        let _ = include_scrollbar;
112        let _ = measure_type;
113
114        let _ = set_width;
115        let _ = set_height;
116    }
117
118    update();
119    let _ = use_event_listener_with_options(
120        use_window(),
121        resize,
122        move |_| update(),
123        UseEventListenerOptions::default().passive(true),
124    );
125
126    if listen_orientation {
127        let matches = use_media_query("(orientation: portrait)");
128
129        Effect::new(move |_| {
130            let _ = matches.get();
131
132            update();
133        });
134    }
135
136    UseWindowSizeReturn {
137        width: width.into(),
138        height: height.into(),
139    }
140}
141
142/// Options for [`fn@crate::use_window_size_with_options`].
143// #[doc(cfg(feature = "use_window_size"))]
144#[derive(DefaultBuilder)]
145pub struct UseWindowSizeOptions {
146    /// The initial size before anything is measured (like on the server side).
147    /// Defaults to `Size { width: INFINITY, height: INFINITY }`.
148    initial_size: Size,
149
150    /// Listen to the window ` orientationchange ` event. Defaults to `true`.
151    listen_orientation: bool,
152
153    /// Whether the scrollbar should be included in the width and height
154    /// Only effective when `measure_type` is `MeasureType::Inner`.
155    /// Defaults to `true`.
156    include_scrollbar: bool,
157
158    /// Use `window.innerWidth` or `window.outerWidth`.
159    /// Defaults to `MeasureType::Inner`.
160    measure_type: MeasureType,
161}
162
163/// Type of the `measure_type` option.
164#[derive(Default, Clone, Copy, PartialEq, Eq, Debug)]
165pub enum MeasureType {
166    /// Use `window.innerWidth`
167    #[default]
168    Inner,
169    /// Use `window.outerWidth`
170    Outer,
171}
172
173impl Default for UseWindowSizeOptions {
174    fn default() -> Self {
175        Self {
176            initial_size: Size {
177                width: f64::INFINITY,
178                height: f64::INFINITY,
179            },
180            listen_orientation: true,
181            include_scrollbar: true,
182            measure_type: MeasureType::default(),
183        }
184    }
185}
186
187/// Return type of [`fn@crate::use_window_size`].
188// #[doc(cfg(feature = "use_window_size"))]
189pub struct UseWindowSizeReturn {
190    /// The width of the window.
191    pub width: Signal<f64>,
192    /// The height of the window.
193    pub height: Signal<f64>,
194}
leptos_use/use_window_size.rs

leptos_use/
use_window_size.rs
