Skip to content

Commit

Permalink
chore(docs): Update accessibility.mdx (#1965)
Browse files Browse the repository at this point in the history
  • Loading branch information
kooku0 committed Aug 31, 2022
1 parent 3b6485e commit 8ad016b
Showing 1 changed file with 4 additions and 7 deletions.
11 changes: 4 additions & 7 deletions docs/src/pages/guides/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,12 @@ Vestibular dysfunction, a balance disorder of the inner ear, is surprisingly com
/>
</p>

Combine `skipAnimation` with [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) to gracefully disable or reduce the motion of your animations. [react-reduce-motion](https://github.com/infiniteluke/react-reduce-motion) is a cross platform hook that exposes this OS level setting, enabling you to disable or lessen your animations for users that want to opt out.
Combine `skipAnimation` with [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) to gracefully disable or reduce the motion of your animations. `useReducedMotion` enables you to disable or reduce your animations for users that want to opt out.

To disable animations using this hook you can use react-spring's `skipAnimation` global:

```jsx
import { useReducedMotion } from 'react-reduce-motion'
import { Globals } from 'react-spring'
import { Globals, useReducedMotion } from 'react-spring'

const MyApp = () => {
const prefersReducedMotion = useReducedMotion()
Expand All @@ -36,7 +35,7 @@ const MyApp = () => {
Animations can also be disable on a case by case basis using the `immediate` property.

```jsx
import { useReducedMotion } from 'react-reduce-motion'
import { useReducedMotion } from 'react-spring'

const MyComponent = () => {
const prefersReducedMotion = useReducedMotion()
Expand All @@ -48,7 +47,7 @@ const MyComponent = () => {
Finally, animations can be lessened by applying your own heuristic.

```jsx
import { useReducedMotion } from 'react-reduce-motion'
import { useReducedMotion } from 'react-spring'

const MyComponent = () => {
const prefersReducedMotion = useReducedMotion()
Expand All @@ -58,5 +57,3 @@ const MyComponent = () => {
// ...
}
```

Check out [react-reduce-motion](https://github.com/infiniteluke/react-reduce-motion) to learn more.

1 comment on commit 8ad016b

@vercel
Copy link

@vercel vercel bot commented on 8ad016b Aug 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.