@cero-base/react 0.0.1 → 0.0.2

package/README.md

@@ -11,9 +11,12 @@ npm install @cero-base/react
 ## Setup
 
 ```jsx
-import { Cero, Room } from '@cero-base/react'
+import { Cero, Room, useClient } from '@cero-base/react'
 
 function App() {
+  const { db, ready, error } = useClient(client)
+
+  if (!ready) return null
   return (
     <Cero value={db}>
       <Room id={roomId}>
@@ -26,9 +29,17 @@ function App() {
 
 ## Hooks
 
+### useClient(client)
+
+Manages client lifecycle (ready/error). Pass a `Client` instance.
+
+```jsx
+const { db, ready, error } = useClient(client)
+```
+
 ### useCero()
 
-Access the db instance from context.
+Access the db/client instance from context.
 
 ```jsx
 const db = useCero()
@@ -42,12 +53,9 @@ Access the current Room from context.
 const room = useRoom()
 ```
 
-### useCollection(name, query?)
-
-Subscribe to a collection. Returns live data + CRUD methods.
+### useCollection(name, query?, opts?)
 
-- Local/private collections: uses `useCero()` context
-- Shared collections: requires `<Room>` provider
+Subscribe to a collection with CRUD methods.
 
 ```jsx
 const { data, put, del, get, sub } = useCollection('messages')
@@ -55,7 +63,7 @@ const { data, put, del, get, sub } = useCollection('messages')
 
 ### useRooms()
 
-List all rooms. Re-fetches on update events.
+Subscribe to room list.
 
 ```jsx
 const { data: rooms } = useRooms()
@@ -71,7 +79,7 @@ const { data: members } = useMembers()
 
 ### useProfile()
 
-Subscribe to identity profile. Returns profile data + setter.
+Subscribe to identity profile with setter.
 
 ```jsx
 const { data: profile, set } = useProfile()
@@ -84,6 +92,7 @@ await set({ name: 'Alice' })
 | --------------------- | ------------------------------------ |
 | `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             |
 | `useProfile()`        | Subscribe to profile                 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cero-base/react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React hooks and providers for cero-base",
   "files": [
     "src",
@@ -18,8 +18,8 @@
     ".": "./src/index.js"
   },
   "dependencies": {
-    "@cero-base/core": "^0.0.1",
-    "@cero-base/rpc": "^0.0.1"
+    "@cero-base/core": "^0.0.2",
+    "@cero-base/rpc": "^0.0.2"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",

package/src/hooks/use-client.jsx

@@ -1,39 +1,21 @@
-import { useState, useEffect, useRef } from 'react'
-import { Client, getRpc } from '@cero-base/rpc'
+import { useState, useEffect } from 'react'
 
-export function useClient(setup, schema, spec) {
+export function useClient(client) {
   const [db, setDb] = useState(null)
   const [ready, setReady] = useState(false)
   const [error, setError] = useState(null)
-  const ref = useRef(null)
 
   useEffect(() => {
-    let client = null
+    client
+      .ready()
+      .then(() => {
+        setDb(client)
+        setReady(true)
+      })
+      .catch((err) => setError(err.message || String(err)))
 
-    try {
-      const ctx = setup()
-      ref.current = ctx
-      const rpc = getRpc(ctx.pipe, spec)
-      client = new Client(rpc, schema, spec)
-
-      client
-        .ready()
-        .then(() => {
-          setDb(client)
-          setReady(true)
-        })
-        .catch((err) => setError('RPC ready failed: ' + (err.message || String(err))))
-    } catch (err) {
-      setError('Client setup failed: ' + (err.message || String(err)))
-    }
-
-    return () => {
-      try {
-        if (client) client.close()
-        if (ref.current?.destroy) ref.current.destroy()
-      } catch {}
-    }
-  }, [])
+    return () => client.close()
+  }, [client])
 
   return { db, ready, error }
 }