Announcing use-reduced-motion
Tags: a11y, react, showdev
Published: 2020-05-04 12:01:06

---
title: Announcing use-reduced-motion
description: Announcement of the publication of an open source package for the management of motion reduction for web accessibility. Inspired by my readings and wanting to learn more about React's Hook.
published: true
tags: a11y,react,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qnw44zjbu642dpfwx04f.jpg
canonical_url: https://slashgear.github.io/use-reduced-motion/
---

## Everything always starts with an idea

Last week, as I was setting up the dark mode on [my personal website](https://slashgear.github.io/), I got motivated to work on a new package for the React community.

> " Well, somebody shared a hook to handle the `prefers-color-scheme` feature in browsers, that's super handy."

In just a few minutes, I was able to integrate this great feature without getting in my head.
That's when I thought of that [awesome blog post about a new feature for accessibility](https://web.dev/prefers-reduced-motion/).

At the time, while reading this article, I found out that some users may feel uncomfortable consulting web pages that "wiggle".
Indeed, elements of a page that move, zoom or change colors can greatly disturb the use and understanding of the content of our pages.
This may not be the case for you, but many users are in this situation.

In order to allow you to better understand the problem, I suggest a small experiment with a very short video.
Focus on the people dressed in white and try to count the number of passes.

{% youtube Ahg6qcgoay4 %}

Do you understand now?

The _"superb onboarding animation"_ may be very beautiful, but it is very disturbing for some of your users.
They find themselves in the same situation as you do with this video.
The moving elements make it difficult to capture all the information you want to convey.

Fortunately, OS and browsers have become aware of accessibility issues and now provide tools.

**It is therefore our responsibility today to integrate these solutions to avoid putting some of our users in a situation of handicap.**

A _media query_ allows you to stop your animations for users who wish to do so.

```css
/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}
```

The [support for this feature](https://caniuse.com/#feat=prefers-reduced-motion) is even very correct.

![support for this feature in may 2020](https://dev-to-uploads.s3.amazonaws.com/i/tegmk28n1ctin5um0xsz.png)

Here is a video demo of how this feature works, taken from [the article quoted above](https://web.dev/prefers-reduced-motion/).

https://storage.googleapis.com/web-dev-assets/prefers-reduced-motion/prefers-reduced-motion.mp4

## Where is the package and how to use it?

It's very nice this _media query_ but in some cases, the animations I use on my sites are managed by JavaScript.
Fortunately, we have solutions to track the use of the _media query_ in the browser.

To make them easier to use with React, I've integrated them into a Hook in the way of "use-dark-mode".

https://www.npmjs.com/package/use-reduced-motion

To install it in your project, nothing could be simpler:

```bash
npm install use-reduced-motion
# or
yarn add use-reduced-motion
```

Then you just have to use it in one of your components:

```jsx
import React from 'react'
import { useReducedMotion } from 'use-reduced-motion'
import { AnimatedDiv } from '../somewhere'

export const MyExampleComponent = () => {
  const prefersReducedMotion = useReducedMotion()
  return <AnimatedDiv pause={prefersReducedMotion} />
}
```

I invite you to test here with your browser/OS, the following animation will stop automatically.

{% codesandbox pi966 %}

Feel free to share this article if you liked it, any contribution to the package is welcome.

{% github Slashgear/use-reduced-motion %}

- [React Hook Documentation](https://en.reactjs.org/docs/hooks-intro.html)
- ["use-dark-mode"](https://github.com/donavon/use-dark-mode)

_Image credit [unDraw](https://undraw.co/)_