React

The /react entry point exports a useStorage() hook built on the same framework-agnostic engine as the Vue composable — same options (TTL, migrations, encrypt, compress, sign, sync, debounce/throttle, history, evictOnQuota), same behavior. It's backed by React's useSyncExternalStore, so it's safe under concurrent rendering.

import { useStorage } from 'vue-storage-kit/react'

function Counter() {
  const {
    value: count,
    setValue: setCount,
    isReady,
  } = useStorage('count', {
    defaultValue: 0,
    target: 'local',
  })

  if (!isReady) return <p>Loading…</p>

  return <button onClick={() => setCount((c) => c + 1)}>Clicked {count} times</button>
}

Differences from the Vue composable

	Vue	React
Returns	{ value: Ref<T>, ... } — assign value.value = x to write	{ value: T, setValue, ... } — call setValue(x) or setValue(prev => next) to write
Shared instance	Two Vue components with the same key+target share one Ref	Two React components with the same key+target share one underlying engine (via useSyncExternalStore), but each gets its own snapshot
Reacting to a changed key	Not supported — same as the Vue side	Not supported. Mount a new component instance for a different key (e.g. via a key prop), the same pattern React already recommends for "reset this state"

Two Vue components, two React components, or a mix of both, calling useStorage() with the same key+target all share one underlying engine — one set of timers, one adapter call per write, one TTL/migration/sync pipeline — regardless of which framework(s) created them.

Not yet available for React (Vue-only for now — see the project's todo.md for the tracked backlog): useCookie, useIndexedDB/useIDBRef, useStorageList, useStorageKeys, useBroadcastChannel, and a Pinia-persist equivalent.

react (^18.0.0, for useSyncExternalStore) is an optional peer dependency — only required if you import vue-storage-kit/react.