usePreferredReducedMotion

v0.0.14testeddemo

Reactive prefers-reduced-motion media query, resolving to 'reduce' when the user requests reduced motion and 'no-preference' otherwise. SSR-safe via useMediaQuery.

Source Tests

Examples

const motion = usePreferredReducedMotion();
// motion.value === 'reduce' | 'no-preference'

watchEffect(() => {
  transitionDuration.value = motion.value === 'reduce' ? 0 : 200;
});

Demo

Loading demo…

Signature

export function usePreferredReducedMotion(
  options: UsePreferredReducedMotionOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`options`?	`UsePreferredReducedMotionOptions`	`{}`	Options (custom `window`)

Returns

UsePreferredReducedMotionReturnReadonly ref of the current motion preference