Browser

usePreferredReducedMotion

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

Demo

Reduced Motion Preference

Normal

Tracks whether the user prefers reduced motion.

Your system has no motion preference. Animations are fine to use.

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

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

  return <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Motion: {
const motion$: UsePreferredReducedMotionReturn
motion$.
ImmutableObservableBase<ReducedMotionPreference>.get(trackingType?: TrackingType | GetOptions): {}
get()}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>;
}

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

function Component() {
  "use scope";
  const motion$ = createPreferredReducedMotion();

  return <p>Motion: {motion$.get()}</p>;
}

Type

Returns

UsePreferredReducedMotionReturn

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

Source

View on GitHub