docs: update readmes

kripod · Mar 30, 2020 · 1e887e9 · 1e887e9
1 parent 47c97c7
commit 1e887e9
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -40,17 +40,17 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="/kripod"><img src="https://avatars3.githubusercontent.com/u/14854048?v=4" width="100px;" alt="Kristóf Poduszló"/><br /><sub><b>Kristóf Poduszló</b></sub></a><br /><a href="#maintenance-kripod" title="Maintenance">🚧</a> <a href="/kripod/react-hooks/commits?author=kripod" title="Code">💻</a> <a href="/kripod/react-hooks/commits?author=kripod" title="Tests">⚠️</a> <a href="/kripod/react-hooks/commits?author=kripod" title="Documentation">📖</a> <a href="#example-kripod" title="Examples">💡</a> <a href="#ideas-kripod" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-kripod" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
-    <td align="center"><a href="http://twitter.com/dan_abramov"><img src="https://avatars0.githubusercontent.com/u/810438?v=4" width="100px;" alt="Dan Abramov"/><br /><sub><b>Dan Abramov</b></sub></a><br /><a href="/kripod/react-hooks/commits?author=gaearon" title="Code">💻</a> <a href="#blog-gaearon" title="Blogposts">📝</a> <a href="#ideas-gaearon" title="Ideas, Planning, & Feedback">🤔</a> <a href="#tutorial-gaearon" title="Tutorials">✅</a></td>
-    <td align="center"><a href="https://donavon.com"><img src="https://avatars3.githubusercontent.com/u/887639?v=4" width="100px;" alt="Donavon West"/><br /><sub><b>Donavon West</b></sub></a><br /><a href="/kripod/react-hooks/commits?author=donavon" title="Tests">⚠️</a></td>
-    <td align="center"><a href="/prsnnami"><img src="https://avatars1.githubusercontent.com/u/11041007?v=4" width="100px;" alt="Prasanna Mishra"/><br /><sub><b>Prasanna Mishra</b></sub></a><br /><a href="/kripod/react-hooks/commits?author=prsnnami" title="Documentation">📖</a></td>
-    <td align="center"><a href="/Jordan-Gilliam"><img src="https://avatars0.githubusercontent.com/u/25993686?v=4" width="100px;" alt="Nolansym"/><br /><sub><b>Nolansym</b></sub></a><br /><a href="#example-Jordan-Gilliam" title="Examples">💡</a></td>
-    <td align="center"><a href="/cmoog"><img src="https://avatars1.githubusercontent.com/u/7585078?v=4" width="100px;" alt="Charles Moog"/><br /><sub><b>Charles Moog</b></sub></a><br /><a href="/kripod/react-hooks/commits?author=cmoog" title="Code">💻</a> <a href="/kripod/react-hooks/commits?author=cmoog" title="Tests">⚠️</a> <a href="/kripod/react-hooks/commits?author=cmoog" title="Documentation">📖</a> <a href="#example-cmoog" title="Examples">💡</a></td>
-    <td align="center"><a href="https://mjackson.me"><img src="https://avatars0.githubusercontent.com/u/92839?v=4" width="100px;" alt="Michael Jackson"/><br /><sub><b>Michael Jackson</b></sub></a><br /><a href="#ideas-mjackson" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="/kripod"><img src="https://avatars3.githubusercontent.com/u/14854048?v=4" width="100px;" alt=""/><br /><sub><b>Kristóf Poduszló</b></sub></a><br /><a href="#maintenance-kripod" title="Maintenance">🚧</a> <a href="/kripod/react-hooks/commits?author=kripod" title="Code">💻</a> <a href="/kripod/react-hooks/commits?author=kripod" title="Tests">⚠️</a> <a href="/kripod/react-hooks/commits?author=kripod" title="Documentation">📖</a> <a href="#example-kripod" title="Examples">💡</a> <a href="#ideas-kripod" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-kripod" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="http://twitter.com/dan_abramov"><img src="https://avatars0.githubusercontent.com/u/810438?v=4" width="100px;" alt=""/><br /><sub><b>Dan Abramov</b></sub></a><br /><a href="/kripod/react-hooks/commits?author=gaearon" title="Code">💻</a> <a href="#blog-gaearon" title="Blogposts">📝</a> <a href="#ideas-gaearon" title="Ideas, Planning, & Feedback">🤔</a> <a href="#tutorial-gaearon" title="Tutorials">✅</a></td>
+    <td align="center"><a href="https://donavon.com"><img src="https://avatars3.githubusercontent.com/u/887639?v=4" width="100px;" alt=""/><br /><sub><b>Donavon West</b></sub></a><br /><a href="/kripod/react-hooks/commits?author=donavon" title="Tests">⚠️</a></td>
+    <td align="center"><a href="/prsnnami"><img src="https://avatars1.githubusercontent.com/u/11041007?v=4" width="100px;" alt=""/><br /><sub><b>Prasanna Mishra</b></sub></a><br /><a href="/kripod/react-hooks/commits?author=prsnnami" title="Documentation">📖</a></td>
+    <td align="center"><a href="/Jordan-Gilliam"><img src="https://avatars0.githubusercontent.com/u/25993686?v=4" width="100px;" alt=""/><br /><sub><b>Nolansym</b></sub></a><br /><a href="#example-Jordan-Gilliam" title="Examples">💡</a></td>
+    <td align="center"><a href="/cmoog"><img src="https://avatars1.githubusercontent.com/u/7585078?v=4" width="100px;" alt=""/><br /><sub><b>Charles Moog</b></sub></a><br /><a href="/kripod/react-hooks/commits?author=cmoog" title="Code">💻</a> <a href="/kripod/react-hooks/commits?author=cmoog" title="Tests">⚠️</a> <a href="/kripod/react-hooks/commits?author=cmoog" title="Documentation">📖</a> <a href="#example-cmoog" title="Examples">💡</a></td>
+    <td align="center"><a href="https://mjackson.me"><img src="https://avatars0.githubusercontent.com/u/92839?v=4" width="100px;" alt=""/><br /><sub><b>Michael Jackson</b></sub></a><br /><a href="#ideas-mjackson" title="Ideas, Planning, & Feedback">🤔</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="http://jfelix.info"><img src="https://avatars2.githubusercontent.com/u/21092519?v=4" width="100px;" alt="Jose Felix "/><br /><sub><b>Jose Felix </b></sub></a><br /><a href="#infra-Jfelix61" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="/kripod/react-hooks/commits?author=Jfelix61" title="Code">💻</a></td>
-    <td align="center"><a href="/Davide-Gheri"><img src="https://avatars2.githubusercontent.com/u/24524678?v=4" width="100px;" alt="Davide Gheri"/><br /><sub><b>Davide Gheri</b></sub></a><br /><a href="/kripod/react-hooks/issues?q=author%3ADavide-Gheri" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="http://jfelix.info"><img src="https://avatars2.githubusercontent.com/u/21092519?v=4" width="100px;" alt=""/><br /><sub><b>Jose Felix </b></sub></a><br /><a href="#infra-Jfelix61" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="/kripod/react-hooks/commits?author=Jfelix61" title="Code">💻</a></td>
+    <td align="center"><a href="/Davide-Gheri"><img src="https://avatars2.githubusercontent.com/u/24524678?v=4" width="100px;" alt=""/><br /><sub><b>Davide Gheri</b></sub></a><br /><a href="/kripod/react-hooks/issues?q=author%3ADavide-Gheri" title="Bug reports">🐛</a></td>
   </tr>
 </table>
 

diff --git a/packages/state-hooks/src/useTimeline.ts b/packages/state-hooks/src/useTimeline.ts
@@ -21,7 +21,7 @@ import { MAX_SMALL_INTEGER } from './utils';
 export default function useTimeline<T>(
   value: T,
   maxLength: number = MAX_SMALL_INTEGER,
-): readonly T[] {
+): ReadonlyArray<T> {
   const valuesRef = useRef<T[]>([]);
   const prevValue = usePrevious(value);
 

diff --git a/packages/state-hooks/src/useUndoable.ts b/packages/state-hooks/src/useUndoable.ts
@@ -22,7 +22,7 @@ import { MAX_SMALL_INTEGER } from './utils';
  *       <button type="button" onClick={undo} disabled={past.length === 0}>
  *         Undo
  *       </button>
- *       <input value={value} onChange={e => setValue(e.target.value)} />
+ *       <input value={value} onChange={(event) => setValue(event.target.value)} />
  *       <button type="button" onClick={redo} disabled={future.length === 0}>
  *         Redo
  *       </button>

diff --git a/packages/web-api-hooks/README.md b/packages/web-api-hooks/README.md
@@ -35,20 +35,20 @@ import { useGeolocation, useLocalStorage } from 'web-api-hooks';
 #### Table of Contents
 
 - [Sensors](#sensors)
+  - [useColorSchemePreference](#usecolorschemepreference)
   - [useDeviceMotion](#usedevicemotion)
   - [useDeviceOrientation](#usedeviceorientation)
   - [useDocumentReadiness](#usedocumentreadiness)
   - [useDocumentVisibility](#usedocumentvisibility)
   - [useFocus](#usefocus)
   - [useGeolocation](#usegeolocation)
   - [useHover](#usehover)
+  - [useLanguagePreferences](#uselanguagepreferences)
   - [useMedia](#usemedia)
+  - [useMotionPreference](#usemotionpreference)
   - [useMouseCoords](#usemousecoords)
   - [useNetworkAvailability](#usenetworkavailability)
   - [useNetworkInformation](#usenetworkinformation)
-  - [usePreferredColorScheme](#usepreferredcolorscheme)
-  - [usePreferredLanguages](#usepreferredlanguages)
-  - [usePreferredMotionIntensity](#usepreferredmotionintensity)
   - [useSize](#usesize)
   - [useViewportScale](#useviewportscale)
   - [useViewportScrollCoords](#useviewportscrollcoords)
@@ -64,6 +64,21 @@ import { useGeolocation, useLocalStorage } from 'web-api-hooks';
 
 ### Sensors
 
+#### useColorSchemePreference
+
+Tracks color scheme preference of the user.
+
+##### Examples
+
+```javascript
+function Component() {
+  const preferDarkMode = useColorSchemePreference() === 'dark';
+  // ...
+}
+```
+
+Returns **(`"no-preference"` \| `"light"` \| `"dark"`)** Preferred color scheme.
+
 #### useDeviceMotion
 
 Tracks acceleration and rotation rate of the device.
@@ -189,6 +204,21 @@ function Component() {
 
 Returns **\[[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean), Readonly&lt;{onMouseEnter: function (): void, onMouseLeave: function (): void, onTouchStart: function (): void, onTouchEnd: function (): void}>]** Whether the element is hovered, and props to be spread over the element under observation.
 
+#### useLanguagePreferences
+
+Tracks language preferences of the user.
+
+##### Examples
+
+```javascript
+function Component() {
+  const preferredLanguages = useLanguagePreferences();
+  // ...
+}
+```
+
+Returns **ReadonlyArray&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** An array of [BCP 47](https://tools.ietf.org/html/bcp47) language tags, ordered by preference with the most preferred language first.
+
 #### useMedia
 
 Tracks match state of a media query.
@@ -208,6 +238,21 @@ function Component() {
 
 Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** `true` if the associated media query list matches the state of the [`document`](https://developer.mozilla.org/docs/Web/API/Document), or `false` otherwise.
 
+#### useMotionPreference
+
+Tracks motion intensity preference of the user.
+
+##### Examples
+
+```javascript
+function Component() {
+  const preferReducedMotion = useMotionPreference() === 'reduce';
+  // ...
+}
+```
+
+Returns **(`"no-preference"` \| `"reduce"`)** Preferred motion intensity.
+
 #### useMouseCoords
 
 Tracks mouse position.
@@ -260,51 +305,6 @@ function Component() {
 
 Returns **([NetworkInformation](https://developer.mozilla.org/docs/Web/API/NetworkInformation) \| [undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined))** Connection data, or `undefined` when unavailable.
 
-#### usePreferredColorScheme
-
-Tracks color scheme preference of the user.
-
-##### Examples
-
-```javascript
-function Component() {
-  const preferDarkMode = usePreferredColorScheme() === 'dark';
-  // ...
-}
-```
-
-Returns **(`"no-preference"` \| `"light"` \| `"dark"`)** Preferred color scheme.
-
-#### usePreferredLanguages
-
-Tracks language preferences of the user.
-
-##### Examples
-
-```javascript
-function Component() {
-  const preferredLanguages = usePreferredLanguages();
-  // ...
-}
-```
-
-Returns **ReadonlyArray&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** An array of [BCP 47](https://tools.ietf.org/html/bcp47) language tags, ordered by preference with the most preferred language first.
-
-#### usePreferredMotionIntensity
-
-Tracks motion intensity preference of the user.
-
-##### Examples
-
-```javascript
-function Component() {
-  const preferReducedMotion = usePreferredMotionIntensity() === 'reduce';
-  // ...
-}
-```
-
-Returns **(`"no-preference"` \| `"reduce"`)** Preferred motion intensity.
-
 #### useSize
 
 Tracks size of an element.

diff --git a/packages/web-api-hooks/src/useLanguagePreferences.ts b/packages/web-api-hooks/src/useLanguagePreferences.ts
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { canUseDOM, managedEventListener } from './utils';
 
-function getPreferredLanguages(): readonly string[] {
+function getPreferredLanguages(): ReadonlyArray<string> {
   return navigator.languages || [navigator.language];
 }
 
@@ -17,7 +17,7 @@ function getPreferredLanguages(): readonly string[] {
  *   // ...
  * }
  */
-export default function useLanguagePreferences(): readonly string[] {
+export default function useLanguagePreferences(): ReadonlyArray<string> {
   const [languages, setLanguages] = useState(
     canUseDOM ? getPreferredLanguages() : ['en-US', 'en'],
   );

diff --git a/packages/web-api-hooks/src/useMouseCoords.ts b/packages/web-api-hooks/src/useMouseCoords.ts
@@ -13,8 +13,8 @@ import { managedEventListener } from './utils';
  *   // ...
  * }
  */
-export default function useMouseCoords(): readonly [number, number] {
-  const [coords, setCoords] = useState<readonly [number, number]>([0, 0]);
+export default function useMouseCoords(): Readonly<[number, number]> {
+  const [coords, setCoords] = useState<Readonly<[number, number]>>([0, 0]);
 
   useEffect(
     () =>

diff --git a/packages/web-api-hooks/src/useSize.ts b/packages/web-api-hooks/src/useSize.ts
@@ -21,8 +21,8 @@ import { useEffect, useState } from 'react';
 export default function useSize(
   ref: React.RefObject<HTMLElement>,
   ResizeObserverOverride?: typeof ResizeObserver,
-): readonly [number, number] {
-  const [size, setSize] = useState<readonly [number, number]>([0, 0]);
+): Readonly<[number, number]> {
+  const [size, setSize] = useState<Readonly<[number, number]>>([0, 0]);
 
   useEffect(() => {
     const ResizeObserver = ResizeObserverOverride || window.ResizeObserver;

diff --git a/packages/web-api-hooks/src/useViewportScrollCoords.ts b/packages/web-api-hooks/src/useViewportScrollCoords.ts
@@ -15,8 +15,8 @@ import { canUseDOM, managedEventListener } from './utils';
  *   // ...
  * }
  */
-export default function useViewportScrollCoords(): readonly [number, number] {
-  const [coords, setCoords] = useState<readonly [number, number]>(
+export default function useViewportScrollCoords(): Readonly<[number, number]> {
+  const [coords, setCoords] = useState<Readonly<[number, number]>>(
     canUseDOM
       ? [window.visualViewport.pageLeft, window.visualViewport.pageTop]
       : [0, 0],

diff --git a/packages/web-api-hooks/src/useViewportSize.ts b/packages/web-api-hooks/src/useViewportSize.ts
@@ -15,8 +15,8 @@ import { canUseDOM, managedEventListener } from './utils';
  *   // ...
  * }
  */
-export default function useViewportSize(): readonly [number, number] {
-  const [size, setSize] = useState<readonly [number, number]>(
+export default function useViewportSize(): Readonly<[number, number]> {
+  const [size, setSize] = useState<Readonly<[number, number]>>(
     canUseDOM
       ? [window.visualViewport.width, window.visualViewport.height]
       : [0, 0],

diff --git a/packages/web-api-hooks/src/useWindowScrollCoords.ts b/packages/web-api-hooks/src/useWindowScrollCoords.ts
@@ -13,8 +13,8 @@ import { canUseDOM, managedEventListener } from './utils';
  *   // ...
  * }
  */
-export default function useWindowScrollCoords(): readonly [number, number] {
-  const [coords, setCoords] = useState<readonly [number, number]>(
+export default function useWindowScrollCoords(): Readonly<[number, number]> {
+  const [coords, setCoords] = useState<Readonly<[number, number]>>(
     canUseDOM ? [window.pageXOffset, window.pageYOffset] : [0, 0],
   );
 

diff --git a/packages/web-api-hooks/src/useWindowSize.ts b/packages/web-api-hooks/src/useWindowSize.ts
@@ -13,8 +13,8 @@ import { canUseDOM, managedEventListener } from './utils';
  *   // ...
  * }
  */
-export default function useWindowSize(): readonly [number, number] {
-  const [size, setSize] = useState<readonly [number, number]>(
+export default function useWindowSize(): Readonly<[number, number]> {
+  const [size, setSize] = useState<Readonly<[number, number]>>(
     canUseDOM ? [window.innerWidth, window.innerHeight] : [0, 0],
   );