Skip to content

useSessionStorage

Get and Set a specific value in the session storage.

Parameters

  1. the session storage key.
  2. the initial value of the key (default is null).

Return Values

It returns a tuple of 2 values:

IndexNameTypeDescription
0valueAnythe current session storage value.
1setValueFunctionupdate the value.

INFO

When you update a value on the session storage, a StorageEvent will be fired on window.

Example Usage

tsx
import { useSessionStorage } from 'react-pre-hooks';

export default function Example() {
  const [counter, setCounter] = useSessionStorage('counter', 0);

  return (
    <main>
      <button onClick={() => setCounter(v => v + 1)}>+</button>
      <span>{counter}</span>
      <button onClick={() => setCounter(v => v - 1)}>-</button>
    </main>
  );
}
import { useSessionStorage } from 'react-pre-hooks';

export default function Example() {
  const [counter, setCounter] = useSessionStorage('counter', 0);

  return (
    <main>
      <button onClick={() => setCounter(v => v + 1)}>+</button>
      <span>{counter}</span>
      <button onClick={() => setCounter(v => v - 1)}>-</button>
    </main>
  );
}

Released under the MIT License.