leptos-use/examples/use_prefers_reduced_motion/src/main.rs
Hector Candelaria 6d57bdf7f5 Feat: Add prefers-reduced-motion API implementation
Implemented the `use_prefers_reduced_motion` function to create a
reactive interface for detecting the user's reduced motion preference
via the `prefers-reduced-motion` media query.
2024-08-18 17:17:06 -04:00

29 lines
812 B
Rust

use leptos::*;
use leptos_use::docs::{demo_or_body, BooleanDisplay};
use leptos_use::use_prefers_reduced_motion;
#[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>
}
}
fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to(demo_or_body(), || {
view! { <Demo/> }
})
}