WIP

Author: jquense

src/useFocusManager.ts

@@ -1,7 +1,6 @@
 import { useCallback, useRef } from 'react'
-
-import useMounted from './useMounted'
 import useEventCallback from './useEventCallback'
+import useMounted from './useMounted'
 
 export interface FocusManagerOptions {
   /**
@@ -26,13 +25,17 @@ export interface FocusManagerOptions {
   isDisabled: () => boolean
 }
 
+export interface FocusController {
+  onBlur: (event: any) => void
+  onFocus: (event: any) => void
+}
 /**
  * useFocusManager provides a way to track and manage focus as it moves around
  * a container element. An `onChange` is fired when focus enters or leaves the
  * element, but not when it moves around inside the element, similar to
  * `pointerenter` and `pointerleave` DOM events.
  *
- * ```ts
+ * ```tsx
  * const [focused, setFocusState] = useState(false)
  *
  * const { onBlur, onFocus } = useFocusManager({
@@ -49,10 +52,10 @@ export interface FocusManagerOptions {
  *   </div>
  * ```
  *
- * @param opts Options
- * @returns FocusController a set of paired focus and blur event handlers
  */
-export default function useFocusManager(opts: FocusManagerOptions) {
+export default function useFocusManager(
+  opts: FocusManagerOptions,
+): FocusController {
   const isMounted = useMounted()
 
   const lastFocused = useRef<boolean | undefined>()

src/useInterval.ts

@@ -4,6 +4,15 @@ import useCommittedRef from './useCommittedRef'
 /**
  * Creates a `setInterval` that is properly cleaned up when a component unmounted
  *
+ * ```tsx
+ *  function Timer() {
+ *    const [timer, setTimer] = useState(0)
+ *    useInterval(() => setTimer(i => i + 1), 1000)
+ *
+ *    return <span>{timer} seconds past</span>
+ *  }
+ * ```
+ *
  * @param fn an function run on each interval
  * @param ms The milliseconds duration of the interval
  */
@@ -12,22 +21,53 @@ function useInterval(fn: () => void, ms: number): void
 /**
  * Creates a pausable `setInterval` that is properly cleaned up when a component unmounted
  *
+ * ```tsx
+ *  const [paused, setPaused] = useState(false)
+ *  const [timer, setTimer] = useState(0)
+ *
+ *  useInterval(() => setTimer(i => i + 1), 1000, paused)
+ *
+ *  return (
+ *    <span>
+ *      {timer} seconds past
+ *
+ *      <button onClick={() => setPaused(p => !p)}>{paused ? 'Play' : 'Pause' }</button>
+ *    </span>
+ * )
+ * ```
+ *
  * @param fn an function run on each interval
  * @param ms The milliseconds duration of the interval
  * @param paused Whether or not the interval is currently running
  */
 function useInterval(fn: () => void, ms: number, paused: boolean): void
 
 /**
- * Creates a pausable `setInterval` that is properly cleaned up when a component unmounted
+ * Creates a pausable `setInterval` that _fires_ immediately and is
+ * properly cleaned up when a component unmounted
+ *
+ * ```tsx
+ *  const [timer, setTimer] = useState(-1)
+ *  useInterval(() => setTimer(i => i + 1), 1000, false, true)
+ *
+ *  // will update to 0 on the first effect
+ *  return <span>{timer} seconds past</span>
+ * ```
  *
  * @param fn an function run on each interval
  * @param ms The milliseconds duration of the interval
  * @param paused Whether or not the interval is currently running
  * @param runImmediately Whether to run the function immediately on mount or unpause
  * rather than waiting for the first interval to elapse
+ *
+
  */
-function useInterval(fn: () => void, ms: number, paused: boolean, runImmediately: boolean): void
+function useInterval(
+  fn: () => void,
+  ms: number,
+  paused: boolean,
+  runImmediately: boolean,
+): void
 
 function useInterval(
   fn: () => void,

www/package.json

@@ -7,8 +7,8 @@
     "build": "gatsby build"
   },
   "dependencies": {
-    "@docpocalypse/gatsby-theme": "^0.8.12",
-    "gatsby": "^2.18.11",
+    "@docpocalypse/gatsby-theme": "^0.9.4",
+    "gatsby": "^2.19.18",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   }