@aqwas/react

React hooks for Aqwas — distributed real-time state powered by CRDT.

Install

npm install @aqwas/react @aqwas/core

Quick start

1. Wrap your app with AqwasProvider

import { AqwasProvider } from '@aqwas/react'

function App() {
  return (
    <AqwasProvider config={{
      url: 'wss://aqwas-server.fly.dev/ws',
      storeId: 'project/my-store',
      token: 'aq_live_xxx',
    }}>
      <YourApp />
    </AqwasProvider>
  )
}

2. Use useAqwas in any component

import { useAqwas } from '@aqwas/react'

function TaskView() {
  const [task, setTask] = useAqwas<string>('task')
  return (
    <div>
      <p>{task}</p>
      <button onClick={() => setTask('Updated task')}>Update</button>
    </div>
  )
}

API

<AqwasProvider config={...}>

Wraps your component tree and manages a single AqwasClient connection.

config: AqwasClientConfig  // same as @aqwas/core AqwasClient constructor

useAqwas<T>(key)

Subscribe to a single key. Returns [value, setValue, deleteValue].

const [value, setValue, deleteValue] = useAqwas<string>('task')
setValue('New value')   // syncs to all connected clients
deleteValue()           // removes the key

useAqwasAll()

Subscribe to the full state snapshot. Re-renders on any change.

const [state, client] = useAqwasAll()
// state: Record<string, unknown>
// client: AqwasClient (for imperative operations)

useAqwasClient(config)

Standalone hook — creates its own client without a provider. Useful for one-off connections.

const { client, connectionState, synced, error } = useAqwasClient({
  url: 'wss://aqwas-server.fly.dev/ws',
  storeId: 'project/my-store',
  token: 'aq_live_xxx',
})

Connection state

connectionState is one of: "disconnected" | "connecting" | "joining" | "connected" | "reconnecting" | "destroyed"

synced becomes true once the first full state sync is received from the server.