use_media_query

Reactive Media Query.

Demo

Usage

use leptos::prelude::*;
use leptos_use::use_media_query;

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

let is_large_screen = use_media_query("(min-width: 1024px)");

let is_dark_preferred = use_media_query("(prefers-color-scheme: dark)");

   view! { }
}

Server-Side Rendering

On the server this functions returns a Signal that is always false.

See also

• use_preferred_dark
• use_preferred_contrast
• use_prefers_reduced_motion

Feature

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

Source

Source • Demo • Docs