browser-reduced-motion

Reactive (prefers-reduced-motion: reduce) as a global atom plus a boolean selector.

Install

bun add @valdres/browser-reduced-motion

Live example

Usage

import { useValue } from "valdres-react"
import { prefersReducedMotionSelector } from "@valdres/browser-reduced-motion"

function Banner() {
    const reduced = useValue(prefersReducedMotionSelector)
    return <div className={reduced ? "static" : "animated"} />
}

Exports

Cross-framework

The atom is global: read it with each adapter's primitive (useValue, createValue, injectValue, watch) or store.get / store.sub in plain JS. The media-query subscription starts on the first subscriber and stops when the last one leaves.