browser-reduced-data

Wraps the (prefers-reduced-data: reduce) media query as a global atom, with a boolean selector.

Install

bun add @valdres/browser-reduced-data

Live example

Usage

import { createValue } from "valdres-solid"
import { prefersReducedDataSelector } from "@valdres/browser-reduced-data"

function Hero() {
    const reduced = createValue(prefersReducedDataSelector) // () => boolean
    return reduced() ? <Poster /> : <Video />
}

Exports

Cross-framework

reducedDataAtom is a global atom; only the read primitive changes per framework (useValue, createValue, injectValue, watch, or store.get / store.sub). The browser subscription starts on the first subscriber and stops when the last leaves.