@mmgt-cloud/sync-react

Headless React 19 bindings for @mmgt-cloud/sync-client.

Install

pnpm add @mmgt-cloud/sync-client @mmgt-cloud/sync-react

No .npmrc, GitHub account, or access token is required. Requires React 19 and a configured SyncClient or clientOptions. Public exports include the provider, status/collection/mutation/conflict hooks, and their types. Licensed under MIT.

Provider

import { IndexedDBSyncStore, SyncClient } from "@mmgt-cloud/sync-client";
import { SyncProvider } from "@mmgt-cloud/sync-react";

const client = new SyncClient({
  baseUrl: "https://api.mmgt.cloud/sync",
  appId: "your-app-id",
  userId: session.user.id,
  tokenProvider: () => session.accessToken,
  store: new IndexedDBSyncStore("my-app-sync"),
});

root.render(<SyncProvider client={client}><App /></SyncProvider>);

The provider can also construct the client from clientOptions, including explicit userId and an optional workspace grantProvider. It tracks identity changes. Hooks fence late reads and cancel their active sync requests when the client changes or a component unmounts. Dispose externally owned clients on logout; their offline queues remain bound to the original account. See the Sync client contract for snapshot recovery and migration of legacy IndexedDB.

Hooks

• useSyncStatus() — status, last result, error and syncNow(options) with cancellation and explicit hasMore.
• useSyncCollection<T>(collection) — local records, loading, error and reload().
• useSyncMutation<T>(collection) — queues a local mutation through mutate().
• useSyncConflicts<T>() — local conflicts, permanent rejections and reconciliation items, loading, error, reload() and clear().

function ConflictInbox() {
  const { conflicts, loading, error, reload, clear } = useSyncConflicts<{ title: string }>();
  if (loading) return <p>Loading conflicts…</p>;
  if (error) return <button onClick={() => void reload()}>Retry</button>;
  return (
    <ul>
      {conflicts.map((conflict) => (
        <li key={conflict.mutation_id}>
          {conflict.record_id}
          <button onClick={() => void clear([conflict.mutation_id])}>Acknowledge</button>
        </li>
      ))}
      {conflicts.length > 0 ? <button onClick={() => void clear()}>Clear all</button> : null}
    </ul>
  );
}

Commands

pnpm --filter @mmgt-cloud/sync-react lint
pnpm --filter @mmgt-cloud/sync-react test
pnpm --filter @mmgt-cloud/sync-react build