Storage
/ API Reference
Storage
/ API Reference

useSessionStorage

A React hook to manage a value in sessionStorage (new tab).
It uses useStorage under the hood.

The Gist

import { useSessionStorage } from '@weser/storage'

function Component() {
  const [counter, setCounter, isLoading] = useSessionStorage('counter', 0)

  if (isLoading) {
    return <div>Loading...</div>
  }

  return (
    <div>
      {counter}
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
      <button onClick={() => setCounter(counter - 1)}>Decrement</button>
    </div>
  )
}

Parameters

ParameterTypeDescription
keystringThe key of the item to set.
initialStateTThe initial value of the item.
configConfigThe configuration object.

Returns

([T, Dispatch<SetStateAction<T>>, boolean]) A tuple where the first element is the value, the second element is a function to update the value and the third element is a boolean indicating if the value is still loading.

On this page