use_prefers_reduced_motion

Reactive reduced motions preference.

Demo

Usage

use leptos::*;
use leptos_use::use_prefers_reduced_motion;
use leptos_use::docs::BooleanDisplay;

#[component]
fn Demo() -> impl IntoView {
let is_reduced_motion_preferred = use_prefers_reduced_motion();

view! {
    <div>
        <p>Prefers reduced motions: <BooleanDisplay value=is_reduced_motion_preferred/></p>
        <p>
            Update reduce motion preference
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences">
                documentation.
            </a>
        </p>
    </div>
}
}

Server-Side Rendering

On the server this will try to read the Sec-CH-Prefers-Reduced-Motion header to indicate the preference for animations to be displayed with reduced motion. Please have a look at the linked documentation above to see browser support as well as potential serve requirements.

If you're using axum you have to enable the "axum" feature in your Cargo.toml. In case it's actix-web enable the feature "actix", for spin enable "spin".

Bring your own header

In case you're neither using Axum, Actix nor Spin, or the default implementation is not to your liking, you can provide your own way of reading the reduced motion header value using the option UsePrefersReducedMotionOptions::ssr_motion_header_getter.

See also

• use_media_query
• use_preferred_contrast
• use_preferred_dark

Feature

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

Types

• struct UsePrefersReducedMotionOptions

Source

Source • Demo • Docs