hooks & stores

#

React hooks for live UI, stores for everything else

Use the narrower hook whenever you can; reach for the full store only when you need a broad snapshot.

React hooks

The common set you’ll use for status, cache state, and queue counters.

  • useEidosStatus() for online / service-worker state in headers and shell UI.
  • useEidosResource(url) for live cache state on a single resource.
  • useEidosQueueStats() for lightweight pending / failed / replaying counters.
  • useEidosAction(id) for a single queue item and useEidosOnDrain() for sync notifications.
hooks.tsx
const { isOnline, swStatus } = useEidosStatus()
const { pending, failed } = useEidosQueueStats()


useEidosOnDrain(() => toast.success('All offline actions synced'))

Framework-agnostic stores

Svelte, Vue, and vanilla JS can subscribe to the same store primitives.

  • No React dependency is required for the store layer.
  • The stores follow the Svelte subscribe(run) contract.
  • Use them directly when you need fine-grained integration in other frameworks.
store.ts
const unsub = eidosStatus.subscribe(({ isOnline }) => {
  document.title = isOnline ? 'App' : 'App (offline)'
})


const hits = eidosResource('/api/products').getState()?.cacheHits ?? 0
unsub()