@kyleshevlin/use-common v2.0.1

use-common

Just some common custom React hooks so I don't have to keep writing them over and over.

• useBool
• useCounter
• useNumber
• usePrevious
• useString

More to come.

Getting started

Install the package:

npm install --save @kyleshevlin/use-common

And use the hooks

import { useBool } from '@kyleshevlin/use-common'

function Toggle() {
  const [isOpen, { toggle }] = useBool()

  return (
    <button type="button" onClick={toggle}>
      {String(isOpen)}
    </button>
  )
}

Philosophy

By creating a library of small hooks with defined state handlers, I can quickly compose more complex custom hooks through composition. For example, I can make a useTextInput hook with the following composition:

function useTextInput(initialState = '') {
  const [state, handlers] = useString(initialState)
  const handleChange = React.useCallback(e => {
    handlers.update(e.target.value)
  })

  return [state, { ...handlers, handleChange }]
}

// And in a component
const [value, { handleChange }] = useTextInput()

API

These hooks follow a common pattern of returning a tuple of state and handlers for that state. When composing functionality with these hooks, rename the state to what a name that works best for your use case with array destructuring, and rename the individual handlers with object destructuring assignment.

useBool

This hook manages a Boolean state.

Arguments

Handlers

useString

This hook manages a String state and ensures it remains a String.

Arguments

Handlers

useNumber

This hook manages a Number state and ensures it remains a Number.

Arguments

Handlers

useCounter

This hook builds a counter on top of useNumber.

Arguments

Handlers

usePrevious

This hook manages a value's previous state. It returns the value from the previous render.

Arguments