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.
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.
React hooks and provider for connecting components to the Strata Sync engine.
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.