import { useReduceMotion } from '@uhg-abyss/mobile';

Usage

The useReduceMotion hook is a custom hook designed to determine whether the user has enabled the "Reduce Motion" accessibility setting on their device. This setting is often used by individuals who prefer to minimize animations and motion effects for accessibility or comfort reasons.

The hook returns an object {reducedMotionEnabled} with the boolean value:

• true: "Reduce Motion" is enabled.
• false: "Reduce Motion" is disabled.

When reduce motion is enabled, this hook can be used to adjust animation behavior.

Enabling Reduce Motion by Device

iOS

• Open the Settings app
• Select Accessibility
• Choose Motion
• Toggle the switch next to Reduce Motion to on

Android

• Open the Settings app
• Select Accessibility
• Depending on your Android version, look for Remove Animations (or similar)

Windows

• Open Settings
• Select Accessibility
• Go to Visual Effects
• Toggle Animation Effects to off

Mac OS

• Open System Settings
• Select Accessibility
• Choose Display
• Toggle Reduce Motion to on

Additional Notes

• The hook listens for changes to the "Reduce Motion" setting and updates its value dynamically.
• The useAnimation hook integrates useReduceMotion directly, ensuring that animated components automatically respect the user's motion preferences without requiring additional handling.
• Use this hook to create a more inclusive and accessible experience for users who prefer minimal motion effects. Please refer to accessibility guidelines for animations when creating new components.
  • WCAG standards:
    • iOS
    • Android