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 { Component } from "@angular/core"
import { injectValue } from "valdres-angular"
import { prefersReducedDataSelector } from "@valdres/browser-reduced-data"

@Component({
    selector: "app-hero",
    template: `{{ reduced() ? "Reduced" : "Full" }}`,
})
export class Hero {
    reduced = injectValue(prefersReducedDataSelector) // Signal<boolean>
}

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.