For AI agents: the documentation index is at /stratasync/docs/llms.txt. Append .md to any page URL, or send Accept: text/markdown, for the Markdown version of that page.
For AI agents: the documentation index is at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
React hooks and provider for connecting components to the Strata Sync engine.
npm install @stratasync/react| Package | Required version |
|---|---|
react | ^18.0.0 || ^19.0.0 |
yjs | ^13.6.0 |
Wrap your component tree with SyncProvider.
Published with Edda
import { SyncProvider } from "@stratasync/react";
import { createSyncClient } from "@stratasync/client";
import { createIndexedDbStorage } from "@stratasync/storage-idb";
import { createGraphQLTransport } from "@stratasync/transport-graphql";
import { createMobXReactivity } from "@stratasync/mobx";
const client = createSyncClient({
storage: createIndexedDbStorage(),
transport: createGraphQLTransport({
/* ... */
}),
reactivity: createMobXReactivity(),
});
function App() {
return (
<SyncProvider client={client}>
<TaskList />
</SyncProvider>
);
}import { useQuery, useModel } from "@stratasync/react";
function TaskList() {
const { data: tasks, isLoading } = useQuery<Task>("Task", {
where: (t) => t.status !== "done",
orderBy: (a, b) => b.priority.localeCompare(a.priority),
});
if (isLoading) {
return <div>Loading...</div>;
}
return (
<ul>
{tasks.map((task) => (
<li key={task.id}>{task.title}</li>
))}
</ul>
);
}All sync hooks must be called within this provider.
<SyncProvider
client={syncClient}
autoStart={true} // Start client on mount (default: true)
autoStop={true} // Stop client on unmount (default: true)
>
{children}
</SyncProvider>| Prop | Type | Default | Description |
|---|---|---|---|
client | SyncClient | Required | The sync client instance. |
children | ReactNode | Required | Child components. |
autoStart | boolean | true | Automatically call client.start() on mount. |
autoStop | boolean | true | Automatically call client.stop() on unmount. |
Exported for testing. Provide a mock sync client directly:
import { SyncContext } from "@stratasync/react";
// In tests:
<SyncContext.Provider value={mockContextValue}>
<ComponentUnderTest />
</SyncContext.Provider>;Access via useSyncClient(). See Hooks for all available hooks.