Browser

usePreferredReducedTransparency

Reactive reduced transparency preference. Returns a ReadonlyObservable tracking the user's transparency preference ('reduce' or 'no-preference') via the prefers-reduced-transparency media query.

Demo

Reduced Transparency Preference

Normal

Tracks whether the user prefers reduced transparency.

Your system has no transparency preference.

import { 
const usePreferredReducedTransparency: () => UsePreferredReducedTransparencyReturn
usePreferredReducedTransparency } from "@usels/web";

function 
function Component(): JSX.Element
Component() {
  const 
const transparency$: UsePreferredReducedTransparencyReturn
transparency$ = 
function usePreferredReducedTransparency(): UsePreferredReducedTransparencyReturn
Framework-agnostic reactive prefers-reduced-transparency tracker.
Composes createMediaQuery and exposes a computed Observable mapping
to 'reduce' / 'no-preference'. Must be called inside a useScope factory.
usePreferredReducedTransparency();

  return <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Transparency: {
const transparency$: UsePreferredReducedTransparencyReturn
transparency$.
ImmutableObservableBase<ReducedTransparencyPreference>.get(trackingType?: TrackingType | GetOptions): {}
get()}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>;
}

import { createPreferredReducedTransparency } from "@usels/web";

function Component() {
  "use scope";
  const transparency$ = createPreferredReducedTransparency();

  return <p>Transparency: {transparency$.get()}</p>;
}

Type

Returns

UsePreferredReducedTransparencyReturn

Name	Type	Description
`peek`	`{ (): ReducedTransparencyPreference; (): ReducedTransparencyPreference; }`	-
`get`	`(trackingType?: TrackingType \| GetOptions) => ReducedTransparencyPreference`	-
`onChange`	`(cb: ListenerFn<ReducedTransparencyPreference>, options?: { trackingType?: TrackingType; initial?: boolean \| undefined; immediate?: boolean \| undefined; noArgs?: boolean \| undefined; } \| undefined) => () => void`	-

Source

View on GitHub