use_window_size
Reactive window size.
Demo
Usage
use leptos::*;
use leptos_use_window_size::{use_window_size, UseWindowSizeReturn};
#[component]
fn Demo() -> impl IntoView {
let UseWindowSizeReturn { width, height } = use_window_size();
view! { }
}Server-Side Rendering
Make sure you follow the instructions in Server-Side Rendering.
On the server the width and height are always initial_size which defaults to
Size { width: INFINITY, height: INFINITY }.
Installation
cargo add leptos-use-window-size
Options
UseWindowSizeOptions
Options for use_window_size_with_options.
Every option is set with a builder method of the same name, e.g. UseWindowSizeOptions::default().initial_size(...). See also the API docs.
initial_size
Type: Size
The initial size before anything is measured (like on the server side).
Defaults to Size { width: INFINITY, height: INFINITY }.
listen_orientation
Type: bool
Listen to the window orientationchange event. Defaults to true.
include_scrollbar
Type: bool
Whether the scrollbar should be included in the width and height
Only effective when measure_type is MeasureType::Inner.
Defaults to true.
measure_type
Type: MeasureType
Use window.innerWidth or window.outerWidth.
Defaults to MeasureType::Inner.