leptos_use

Function use_prefers_reduced_motion

Source 
pub fn use_prefers_reduced_motion() -> Signal<bool>
Expand description

Reactive reduced motions preference.

§Demo

Link to Demo

§Usage

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 crate::UsePrefersReducedMotionOptions::ssr_motion_header_getter.

§See also