You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-5Lines changed: 6 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,21 +1,22 @@
1
1
# React Reduce Motion ➰
2
2
3
3
## Installation and Usage
4
-
React Reduce Motion requires react `^16.8.0` or for native, requires react-native `^0.60`.
4
+
5
+
> ❗ React Reduce Motion requires react <code>^16.8.0</code> or for native, requires react-native <code>^0.60</code>.
5
6
6
7
```sh
7
8
yarn add react-reduce-motion
8
9
```
9
10
10
-
React Reduce Motion exposes a [react hook](https://reactjs.org/docs/hooks-intro.html) that exposes the "Reduce Motion" preference of a user's operating system to your code.
11
+
React Reduce Motion provides a [react hook](https://reactjs.org/docs/hooks-intro.html) that exposes the "Reduce Motion" preference of a user's operating system to your componets.
Building animations in React are fun! Especially if you're using a library like [react-spring](https://react-spring.io). I recently had some fun [messing around with react-spring](https://lukeherrington.com/posts/springtime-in-react-town/) and learned that animations are not fun for everyone.
19
+
Building animations in React is fun! Especially if you're using a library like [react-spring](https://react-spring.io). I recently had some fun [messing around with react-spring](https://lukeherrington.com/posts/springtime-in-react-town/) and learned that animations are not fun for everyone.
19
20
20
21
Vestibular dysfunction, a balance disorder of the inner ear, is surprisingly common among US adults. [A study](https://www.ncbi.nlm.nih.gov/pubmed/19468085) from the early 2000's found that approximately 69 million Americans had vestibular dysfunction which results in vertigo, nausea, migraines and hearing loss. Many people affected by vestibular dysfunction will choose to set the "Reduce motion" setting in their OS. In macOS it's found in the accessibility settings.
21
22
@@ -94,7 +95,7 @@ The above snippet is where the heuristic is applied. Depending on what you're an
94
95
95
96
To use React Reduce Motion with React Native, import the `native` build use the hook as demonstrated above.
@@ -108,7 +109,7 @@ The native version depends on React Native's [AccessibilityInfo API](https://fac
108
109
109
110
## Inspiration
110
111
111
-
Writing a blog post about my experience learning `react-spring` helped me realize a dedicated package was needed for this purpose. [Read it here](https://lukeherrington.com/posts/springtime-in-react-town/) and you'll learn how I implemented it. [A conversation with Paul, the creator of react-spring](https://github.com/react-spring/react-spring/issues/811) spurred me to contribute this work.
112
+
Writing a blog post about my experience learning `react-spring` helped me realize the need for a package that promotes building accessible animations. [Read it here](https://lukeherrington.com/posts/springtime-in-react-town/) and you'll learn how I implemented it. [A conversation with Paul, the creator of react-spring](https://github.com/react-spring/react-spring/issues/811), spurred me to contribute this work.
0 commit comments