fn

usePreferredReducedTransparency

v0.0.14testeddemo

Reactive prefers-reduced-transparency media query, resolving to 'reduce' or 'no-preference'. SSR-safe (defaults to 'no-preference').

Example

ts
const transparency = usePreferredReducedTransparency();
// transparency.value === 'reduce' | 'no-preference'

Demo

Loading demo…

Signature

ts
export function usePreferredReducedTransparency(
  options: ConfigurableWindow ={ ... }

Parameters

ParameterTypeDescription
options?ConfigurableWindowOptions (custom window)

Returns

ComputedRef<ReducedTransparencyType>Readonly ref of the user's transparency preference