usePreferredReducedMotion

v0.0.15testeddemo

Reactive `prefers-reduced-motion` media query, resolving to `'reduce'` when the user requests reduced motion and `'no-preference'` otherwise. SSR-safe via {@link 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`?	`UseMediaQueryOptions`	`{}`	Options (custom `window`)

Returns

UsePreferredReducedMotionReturnReadonly ref of the current motion preference