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

Argument	Type	Default	Description
initialState	boolean	false	The initial state of the hook

Handlers

Name	Type	Description
off	() => void	Sets the state to false
on	() => void	Sets the state to true
reset	() => void	Sets the state to the initialState
toggle	() => void	Flips the state

useString

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

Arguments

Argument	Type	Default	Description
initialState	string	''	The initial state of the hook

Handlers

Name	Type	Description
update	`string	((currentState: string) => string)`
reset	() => void	Sets the state to the initialState
empty	() => void	Sets the state to an empty string

useNumber

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

Arguments

Argument	Type	Default	Description
initialState	number	0	The initial state of the hook

Handlers

Name	Type	Description
update	`number	((currentState: number) => number)`
reset	() => void	Sets the state to the initialState
zero	() => void	Sets the state to 0

useCounter

This hook builds a counter on top of useNumber.

Arguments

Argument	Type	Default	Description
initialState	number	0	The initial state of the hook
step	number	1	The amount of change used by the inc and dec handlers

Handlers

Name	Type	Description
inc	() => void	Increases the state by the step
dec	() => void	Decreases the state by the step
reset	() => void	Sets the state to the initialState
zero	() => void	Sets the state to 0

usePrevious

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

Arguments

Argument	Type	Description
value	T	The value the hook will track