> ## Documentation Index
> Fetch the complete documentation index at: https://stratasync.blode.md/llms.txt
> Use this file to discover all available pages before exploring further.

# @stratasync/react

## Installation

```bash
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`.

```tsx
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

```tsx
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.

```tsx
<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:

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

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

### Context value

Access via `useSyncClient()`. See [Hooks](/packages/react/hooks) for all available hooks.