use_prefers_reduced_motion

Usage

use leptos::prelude::*;
use leptos_use_preferences::use_prefers_reduced_motion;

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

view! {
    <div>
        <p>Prefers reduced motions: {move || if is_reduced_motion_preferred.get() { "Yes" } else { "No" }}</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

Make sure you follow the instructions in 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".

Bring your own header

In case you’re neither using Axum nor Actix 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.

Installation

cargo add leptos-use-preferences

Options

`UsePrefersReducedMotionOptions`

Options for use_prefers_reduced_motion_with_options.

Every option is set with a builder method of the same name, e.g. UsePrefersReducedMotionOptions::default().ssr_motion_header_getter(...). See also the API docs.

`ssr_motion_header_getter`

Type: Arc<dyn Fn() -> Option<String> + Send + Sync>

Getter function to return the string value of the Sec-CH-Prefers-Reduced-Motion header. When you use one of the features "axum" or "actix" there’s a valid default implementation provided.

Source

Source • Demo • Docs

Keyboard shortcuts