Skip to content

Commit 8ad016b

Browse files
authored
chore(docs): Update accessibility.mdx (#1965)
1 parent 3b6485e commit 8ad016b

File tree

1 file changed

+4
-7
lines changed

1 file changed

+4
-7
lines changed

docs/src/pages/guides/accessibility.mdx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,12 @@ Vestibular dysfunction, a balance disorder of the inner ear, is surprisingly com
1414
/>
1515
</p>
1616

17-
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.
17+
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.
1818

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

2121
```jsx
22-
import { useReducedMotion } from 'react-reduce-motion'
23-
import { Globals } from 'react-spring'
22+
import { Globals, useReducedMotion } from 'react-spring'
2423

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

3837
```jsx
39-
import { useReducedMotion } from 'react-reduce-motion'
38+
import { useReducedMotion } from 'react-spring'
4039

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

5049
```jsx
51-
import { useReducedMotion } from 'react-reduce-motion'
50+
import { useReducedMotion } from 'react-spring'
5251

5352
const MyComponent = () => {
5453
const prefersReducedMotion = useReducedMotion()
@@ -58,5 +57,3 @@ const MyComponent = () => {
5857
// ...
5958
}
6059
```
61-
62-
Check out [react-reduce-motion](https://github.com/infiniteluke/react-reduce-motion) to learn more.

0 commit comments

Comments
 (0)