useMap

A state hook specifically for managing a Javascript Map object.

Dynamic Config

In-Memory Key-Value Store

🗂️

themedark

languagetypescript

version2.4.0

Usage

import { useMap } from 'usehooks-ts'
 
export default function App() {
  const [map, actions] = useMap<string, number>([['a', 1]])
 
  return (
    <div>
      <p>Value of 'a': {map.get('a')}</p>
      <button onClick={() => actions.set('b', 2)}>Add 'b'</button>
      <button onClick={() => actions.remove('a')}>Remove 'a'</button>
    </div>
  )
}

API

const [map, actions] = useMap(initialEntries?)

Actions

Name	Type	Description
`set`	`(key, value) => void`	Adds or updates an element
`setAll`	`(entries) => void`	Replaces all entries
`remove`	`(key) => void`	Removes a specific key
`reset`	`() => void`	Reverts to initial entries
`clear`	`() => void`	Removes all entries

Hook

import { useCallback, useState } from 'react'
 
export type MapActions<K, V> = {
  set: (key: K, value: V) => void
  setAll: (entries: Iterable<readonly [K, V]>) => void
  remove: (key: K) => void
  reset: () => void
  clear: () => void
}
 
export function useMap<K, V>(
  initialEntries?: Iterable<readonly [K, V]>,
): [Map<K, V>, MapActions<K, V>] {
  const [map, setMap] = useState(() => new Map(initialEntries))
 
  const set = useCallback((key: K, value: V) => {
    setMap((prev) => {
      const copy = new Map(prev)
      copy.set(key, value)
      return copy
    })
  }, [])
 
  const setAll = useCallback((entries: Iterable<readonly [K, V]>) => {
    setMap(new Map(entries))
  }, [])
 
  const remove = useCallback((key: K) => {
    setMap((prev) => {
      const copy = new Map(prev)
      copy.delete(key)
      return copy
    })
  }, [])
 
  const reset = useCallback(() => {
    setMap(new Map(initialEntries))
  }, [initialEntries])
 
  const clear = useCallback(() => {
    setMap(new Map())
  }, [])
 
  const actions: MapActions<K, V> = {
    set,
    setAll,
    remove,
    reset,
    clear,
  }
 
  return [map, actions]
}