@cero-base/react

React hooks and providers for cero-base. Works with both CeroBase and Client (RPC) instances.

Install

npm install @cero-base/react

Setup

import { Cero, Room, useClient } from '@cero-base/react'

function App() {
  const { db, ready, error } = useClient(client)

  if (!ready) return null
  return (
    <Cero db={db}>
      <Room id={roomId}>
        <Chat />
      </Room>
    </Cero>
  )
}

Hooks

useClient(client)

Manages client lifecycle (ready/error). Pass a Client instance.

const { db, ready, error } = useClient(client)

useCero()

Access the db/client instance from context.

const db = useCero()

useRoom()

Access the current Room from context.

const room = useRoom()

useCollection(name, query?, opts?)

Subscribe to a collection with CRUD methods. Works for any collection — user-defined ones declared in t.schema(), and the cero built-ins (profile, members, devices, rooms, invites, mirrors, settings).

// User-defined collection
const { data: messages, put, del, get, sub } = useCollection('messages')

// Built-in: profile (private, single-row)
const { data: profileList, put: putProfile } = useCollection('profile')
const profile = profileList?.[0]
await putProfile({ name: 'Alice' })

// Built-in: members (shared — requires <Room>)
const { data: members } = useCollection('members')

// Built-in: devices (private)
const { data: devices } = useCollection('devices')

// Built-in: rooms (private — saved rooms for this identity)
const { data: rooms } = useCollection('rooms')

Exports

| Export | Description | | --------------------- | ------------------------------------------------------ | | Cero | Context provider — wraps db instance | | Room | Context provider — wraps room by id | | useClient(client) | Manage client lifecycle | | useCero() | Access db from context | | useRoom() | Access room from context | | useCollection(name) | Subscribe to any collection (user-defined or built-in) |

License

Apache-2.0