@bunbase-ae/react-sdk

React hooks for BunBase — data fetching, mutations, auth, realtime, and file uploads.

Installation

bun add @bunbase-ae/react-sdk @bunbase-ae/js
# or
npm install @bunbase-ae/react-sdk @bunbase-ae/js

Requires React 19+.

Quick start

Wrap your app in BunBaseProvider:

import { BunBaseClient } from "@bunbase-ae/js";
import { BunBaseProvider } from "@bunbase-ae/react-sdk";

const client = new BunBaseClient({ url: "https://your-bunbase-instance.example.com" });

function App() {
  return (
    <BunBaseProvider client={client}>
      <YourApp />
    </BunBaseProvider>
  );
}

Hooks

useList

Fetch and subscribe to a list of records.

const { data, loading, error, refetch } = useList("posts", { sort: "-_created_at", limit: 20 });

useRecord

Fetch a single record by ID.

const { data, loading, error } = useRecord("posts", "record-id");

useCreate / useUpdate / useDelete

Mutation hooks.

const create = useCreate("posts");
await create.mutate({ title: "Hello", body: "..." });

const update = useUpdate("posts");
await update.mutate("record-id", { title: "Updated" });

const remove = useDelete("posts");
await remove.mutate("record-id");

useAuth

const { user, loading, login, register, logout } = useAuth();

useRealtime

Subscribe to realtime events for a collection.

useRealtime("posts", (event) => {
  console.log(event.type, event.record);
});

usePresence

Track online presence in a channel.

const { members } = usePresence("room:lobby", { userId: user.id });

useUpload

Upload files to BunBase Storage.

const { upload, loading, error } = useUpload("avatars");
await upload(file);

Query cache

QueryCache provides an optional persistence layer (e.g. localStorage) for list queries.

import { QueryCache, localStorageAdapter } from "@bunbase-ae/react-sdk";

const cache = new QueryCache({ storage: localStorageAdapter });

<BunBaseProvider client={client} queryCache={cache}>
  ...
</BunBaseProvider>

Documentation

Full API reference and guides: https://docs-bunbase.palmcode.ae