use_breakpoints

Reactive viewport breakpoints.

Demo

Usage

use leptos::prelude::*;
use leptos_use::{use_breakpoints, BreakpointsTailwind, breakpoints_tailwind};

#[component]
fn Demo() -> impl IntoView {

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);

view! { }
}

Breakpoints

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

• breakpoints_tailwind
• breakpoints_bootstrap_v5
• breakpoints_material
• breakpoints_ant_design
• breakpoints_quasar
• breakpoints_semantic
• breakpoints_master_css

You can also provide your own breakpoints.

use std::collections::HashMap;
use leptos::prelude::*;
use leptos_use::use_breakpoints;

#[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_

use leptos::prelude::*;
use leptos_use::{use_breakpoints, BreakpointsTailwind, breakpoints_tailwind};

#[component]
fn Demo() -> impl IntoView {

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);

view! { }
}

Server-Side Rendering

Make sure you follow the instructions in Server-Side Rendering.

Since internally this uses use_media_query, which returns always false on the server, the returned methods also will return false.

Feature

This function is only available if the crate feature use_breakpoints is enabled

Types

• struct UseBreakpointsReturn
• enum BreakpointsTailwind
• enum BreakpointsBootstrapV5
• enum BreakpointsMaterial
• enum BreakpointsAntDesign
• enum BreakpointsQuasar
• enum BreakpointsSemantic
• enum BreakpointsMasterCss

Source

Source • Demo • Docs