react-hooks

A collection of commonly used utility hooks for React

Install

npm install --save react-hooks

Usage

useAbortableEffect

An enhanced version of React.useEffect that can run an asynchronous effect with an AbortController for cancellation. The controller can be aborted manually, and will be aborted when the dependencies of the effect change or the component unmounts.

import React from 'react'
import { useDisclosure } from '@commander-lol/react-hooks'

export default function AsyncWatcher() {
  const [value, setValue] = React.useState(null)
  const [data, setData] = React.useState(null)

  useAbortableEffect(async ctrl => {
    if (value != null) {
      const result = await fetch(`/my/api/${ value }`, {
        signal: ctrl.signal,
      }) 
      // Alternatively, check if the controller has aborted for non-fetch effects
      if (result.ok) {
        setData(await result.json())
      }
    }
  }, [value])

  return (
    <div>
      <ValueSelector value={value} onChange={setValue} />
      <DataDisplayer value={data} />
    </div>
  )
}

useDisclosure

Encapsulated common 'toggle view' logic used by dialogs, sidebars, etc.

import React from 'react'
import { useDisclosure } from '@commander-lol/react-hooks'

import { Modal } from 'another-library'

export default function SimpleModal({ summary, description }) {
  const state = useDisclosure()
  return (
    <>
      <button onClick={state.onOpen}>{ summary }</button>
      <Modal isOpen={state.isOpen} onClose={state.onClose}>
        <p>{ description }</p>
      </Modal>
    </>
  )
}

License

GPL-3.0+ © Commander-lol