Table of Contents

• Introduction
• Why useReducedMotion
• Installation
• Usage
• Use Case
• Implementation details
• TypeScript Support
• Troubleshooting
• Conclusion

Introduction

The useReducedMotion hook is a custom hook for detecting whether the user has enabled Reduced Motion. It returns a boolean value of either true or false.

Why useReducedMotion

The useReducedMotion hook is a useful tool for adding Reduced Motion functionality to your React application. By using this hook, you can make your app more accessible and improve the user experience for users who have vestibular dysfunction or other conditions that can be exacerbated by motion.

Installation

To use useReducedMotion in your project, you can install it from npm:

npm install --dev @pillar-ui/hooks

Use code with caution. Learn more

Usage

To use the useReducedMotion hook in your React components, import it and call it in your functional component like this:

import { useReducedMotion } from '@pillar-ui/hooks'

function MyComponent() {
  const { reducedMotion } = useReducedMotion()

  return (
    <div>
      <p>Reduced motion enabled: {reducedMotion}</p>
    </div>
  )
}

Use code with caution. Learn more

Use Case

The useReducedMotion hook can be used in a variety of situations where you need to detect whether the user has enabled Reduced Motion. For example, you could use it to:

• Disable animations and other motion-based effects based on the user's Reduced Motion setting.
• Present the user with a choice of whether to enable or disable Reduced Motion.
• Provide alternative ways for users to interact with your application if they have Reduced Motion enabled.

Implementation details

The useReducedMotion hook uses the useMediaQuery hook from the React library to detect whether the user has enabled Reduced Motion.

TypeScript Support

This hook is written in TypeScript and provides type definitions for its usage.

Troubleshooting

If you encounter any issues using the useReducedMotion hook, please refer to the documentation or open an issue on the project's GitHub repository.

Conclusion

The useReducedMotion custom hook is a useful tool for adding Reduced Motion functionality to your React application. By using this hook, you can make your app more accessible and improve the user experience for users who have vestibular dysfunction or other conditions that can be exacerbated by motion.