Function leptos_use::use_breakpoints

source ·

pub fn use_breakpoints<K: Eq + Hash + Debug + Clone>(
    breakpoints: HashMap<K, u32>
) -> UseBreakpointsReturn<K>

Expand description

Reactive viewport breakpoints.

§Demo

Link to Demo

§Usage

let screen_width = use_breakpoints(breakpoints_tailwind());

use BreakpointsTailwind::*;

let sm_and_larger = screen_width.ge(Sm);
let larger_than_sm = screen_width.gt(Sm);
let lg_and_smaller = screen_width.le(Lg);
let smaller_than_lg = screen_width.lt(Lg);

§Breakpoints

There are many predefined breakpoints for major UI frameworks. The following are provided.

You can also provide your own breakpoints.

use leptos::*;
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
enum MyBreakpoints {
    Tablet,
    Laptop,
    Desktop,
}

fn my_breakpoints() -> HashMap<MyBreakpoints, u32> {
    use MyBreakpoints::*;

    HashMap::from([
        (Tablet, 640),
        (Laptop, 1024),
        (Desktop, 1280),
    ])
}

#[component]
fn Demo() -> impl IntoView {
    let screen_width = use_breakpoints(my_breakpoints());

    use MyBreakpoints::*;

    let laptop = screen_width.between(Laptop, Desktop);

    view! { }
}

§Non-reactive methods

For every reactive method there is also a non-reactive variant that is prefixed with is_

let screen_width = use_breakpoints(breakpoints_tailwind());

use BreakpointsTailwind::*;

let sm_and_larger = screen_width.is_ge(Sm);
let larger_than_sm = screen_width.is_gt(Sm);
let lg_and_smaller = screen_width.is_le(Lg);
let smaller_than_lg = screen_width.is_lt(Lg);

§Server-Side Rendering