react

@noy-db/in-react · pnpm add @noy-db/hub @noy-db/in-react React hooks for noy-db — zero deps beyond React.

What it does

Five hooks built on React 18+'s useSyncExternalStore: useNoydb reads the Noydb instance from context, useVault opens a vault and tracks its lifecycle, useCollection returns a reactive record list, useQuery returns the reactive result of a query builder, and useSync tracks the hub's cross-collection change stream. Change events — put, delete, or sync — drive re-renders automatically; no extra state library needed.

Usage

import { createNoydb } from '@noy-db/hub'
import { NoydbProvider, useVault, useCollection } from '@noy-db/in-react'

const db = await createNoydb({ user: 'me', secret: 'correct horse battery staple' })

function App() {
  return (
    <NoydbProvider db={db}>
      <Invoices />
    </NoydbProvider>
  )
}

function Invoices() {
  const { vault } = useVault('acme')
  const { data, loading } = useCollection<Invoice>(vault, 'invoices')
  if (loading) return <p>Loading…</p>
  return <ul>{data.map((inv) => <li key={inv.id}>{inv.number}</li>)}</ul>
}

See also

• in-* family
• nextjs — App Router server helpers re-export these same hooks under /client
• tanstack-query — framework-free alternative for query/mutation caching