AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
@stratasync/react
React hooks and provider for connecting components to the Strata Sync engine.
| Package | Required version |
|---|---|
react | ^18.0.0 || ^19.0.0 |
yjs | ^13.6.0 |
Wrap your component tree with SyncProvider.
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";
import { eq, sortBy } from "@stratasync/client";
function TaskList() {
const { data: tasks, isLoading } = useQuery<Task>("Task", {
where: (t) => t.status !== "done",
orderBy: sortBy("priority", "desc"),
});
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.