useLocalStorage / useSessionStorage

A useState-shaped hook backed by localStorage or sessionStorage. SSR-safe — returns initialValue on the server, hydrates from storage on the client. localStorage variants sync changes across tabs via the storage event by default.

import { useLocalStorage } from '@wire-ui/react'
 
function Preferences() {
  const [theme, setTheme, removeTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light')
 
  return (
    <>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        {theme}
      </button>
      <button onClick={removeTheme}>Reset</button>
    </>
  )
}

Session storage

The session variant has an identical API but uses sessionStorage and does not sync across tabs.

import { useSessionStorage } from '@wire-ui/react'
 
const [draft, setDraft] = useSessionStorage('draft', '')

Parameters

Options

Returns

A tuple [value, setValue, remove]:

• value: T — current value (server-side: initialValue).
• setValue: (next: T \| (prev: T) => T) => void — write a new value.
• remove: () => void — delete the key and fall back to initialValue.