@iteam/hooks

Iteam Hooks

This is a collection of hooks that we can reuse for any project that needs them. It's also a source of use cases of React Hooks and how to test them using react-testing-library.

Installation

npm install @iteam/hooks

Features

useToggle

Uses useState but returns a setter function that toggles the value.

useToggle(initialValue: boolean): [boolean, () => void]

Example

import React from 'react'
import { useToggle } from '@iteam/hooks'

export const ToggleComponent = () => {
  const [isAlive, toggleValue] = useToggle(false)

  return <button onClick={toggleValue}>{isAlive ? '🚀' : '😴'}</button>
}

useQueryParam

Gets a value from a specified query param

useQueryParam(param: string): string | string[]

Example

import React from 'react'
import { useQueryParam } from '@iteam/hooks'

export const NeedsAParam = () => {
  const param = useQueryParam('sweetParam')

  return (
    <div>
      {typeof param === 'string'
        ? `That's a nice query param with the value ${param}`
        : `Woah! A bunch of params ${param.join(',')}`}
    </div>
  )
}

useDebounce

Debounce the updating of a value

useDebounce<ValueType>(value: ValueType, duration: number): ValueType

Example

import React from 'react'
import { useDebounce } from '@iteam/hooks'

export const Debounced = () => {
  const [inputValue, setInputValue] = React.useState('')
  const debouncedValue = useDebounce(inputValue, 300)

  const handleChange = e => {
    setInputValue(e.currentTarget.value)
  }

  return (
    <div>
      <label htmlFor="test-input">Best field ever</label>
      <input id="test-input" onChange={handleChange} value={debouncedValue} />
      {debouncedValue}
    </div>
  )
}

useLocalStorage

Get and set values in localStorage

useLocalStorage(key: string, initialValue?: any): [string, (newValue: string) => void]

Example

import React from 'react'
import { useLocalStorage } from '@iteam/hooks'

export const Storage = ({ initialValue }) => {
  const [value, setValue] = useLocalStorage('storedValue', initialValue)

  return (
    <div>
      {value ? value : 'no value ;('}
      <label htmlFor="store">Update store value</label>
      <input
        id="store"
        onChange={e => setValue(e.currentTarget.value)}
        type="text"
        value={value}
      />
    </div>
  )
}