@stratasync/react

React hooks and provider for connecting components to the Strata Sync engine.

Installation


npm install @stratasync/react

Peer dependencies

Package	Required version
`react`	`^18.0.0 \|\| ^19.0.0`
`yjs`	`^13.6.0`

Quick start

1. Set up the provider

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>
  );
}

2. Use hooks in components


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>
  );
}

SyncProvider

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>

SyncProviderProps

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.

SyncContext

Exported for testing. Provide a mock sync client directly:


import { SyncContext } from "@stratasync/react";

// In tests:
<SyncContext.Provider value={mockContextValue}>
  <ComponentUnderTest />
</SyncContext.Provider>;

Context value

Access via useSyncClient(). See Hooks for all available hooks.