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

<script setup>
import { useValue } from "valdres-vue"
import { prefersReducedDataSelector } from "@valdres/browser-reduced-data"

const reduced = useValue(prefersReducedDataSelector) // Ref<boolean>
</script>

<template>{{ reduced ? "Reduced" : "Full" }}</template>

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.