useSync

useSync provides a sync() function and the current sync status.

Signature

useSync(callback?: (event: SyncEvent) => void): {
  sync: () => Promise<void>
  status: SyncStatusResult
}

Usage

import { useSync } from "ctrodb/react"

function SyncButton() {
  const { sync, status } = useSync()

  return (
    <div>
      <button onClick={sync} disabled={status.isSyncing}>
        {status.isSyncing ? "Syncing..." : "Sync Now"}
      </button>
      {status.lastError && <p className="error">{status.lastError}</p>}
    </div>
  )
}

With event callback

function SyncingWidget() {
  const { sync, status } = useSync((event) => {
    console.log("Sync event:", event.phase)
  })

  return <button onClick={sync}>Sync</button>
}

Returns the same SyncStatusResult as useSyncStatus.