React

Точка входа /react экспортирует хук useStorage(), построенный на том же фреймворк-агностичном движке, что и Vue composable — те же опции (TTL, миграции, encrypt, compress, sign, sync, debounce/throttle, history, evictOnQuota), то же поведение. Он построен на React useSyncExternalStore, так что безопасен при конкурентном рендеринге.

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>
}

Отличия от Vue composable

	Vue	React
Возвращает	{ value: Ref<T>, ... } — присвойте value.value = x для записи	{ value: T, setValue, ... } — вызовите setValue(x) или setValue(prev => next) для записи
Общий экземпляр	Два Vue-компонента с одним key+target делят один Ref	Два React-компонента с одним key+target делят один и тот же движок (через useSyncExternalStore), но каждый получает свой снапшот
Реакция на изменившийся key	Не поддерживается — как и на стороне Vue	Не поддерживается. Смонтируйте новый экземпляр компонента для другого ключа (например, через проп key) — тот же паттерн, что React уже рекомендует для «сбросить это состояние»

Два Vue-компонента, два React-компонента или их смесь, вызывающие useStorage() с одним key+target, все делят один движок — один набор таймеров, один вызов адаптера на запись, один конвейер TTL/миграций/синхронизации — независимо от того, какой фреймворк(и) их создал.

Пока недоступно для React (пока только для Vue — см. todo.md проекта для отслеживаемого бэклога): useCookie, useIndexedDB/useIDBRef, useStorageList, useStorageKeys, useBroadcastChannel и эквивалент Pinia-persist.

react (^18.0.0, для useSyncExternalStore) — опциональная peer-зависимость, нужна только при импорте vue-storage-kit/react.