Browser

usePreferredContrast

Reactive contrast preference. Returns a ReadonlyObservable tracking the user's preferred contrast level ('more', 'less', 'custom', or 'no-preference') via prefers-contrast media queries.

Demo

Contrast Preference

no-preference

Tracks the user's preferred contrast level.

Current preference: no-preference

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

function 
function Component(): JSX.Element
Component() {
  const 
const contrast$: UsePreferredContrastReturn
contrast$ = 
function usePreferredContrast(): UsePreferredContrastReturn
Framework-agnostic reactive prefers-contrast tracker.
Composes three createMediaQuery calls (more, less, custom) and
exposes a computed Observable mapping them to the matching preference
name, or 'no-preference'. Must be called inside a useScope factory.
usePreferredContrast();

  return <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Contrast: {
const contrast$: UsePreferredContrastReturn
contrast$.
ImmutableObservableBase<ContrastPreference>.get(trackingType?: TrackingType | GetOptions): {}
get()}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>;
}

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

function Component() {
  "use scope";
  const contrast$ = createPreferredContrast();

  return <p>Contrast: {contrast$.get()}</p>;
}

Type

Returns

UsePreferredContrastReturn

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

Source

View on GitHub