@letar/forms — Declarative Form Components for React

Overview

@letar/forms/offline provides offline-first form support for Progressive Web Apps. Forms submitted while offline are queued locally and synced when connectivity is restored.

Installation

import { useOfflineForm, FormOfflineIndicator, FormSyncStatus } from '@letar/forms/offline'

Basic Usage

<Form
  schema={Schema}
  initialValue={data}
  offline={{
    actionType: 'UPDATE_PROFILE',
    onQueued: () => toast.info('Saved locally — will sync when online'),
    onSynced: () => toast.success('Synced to server!'),
  }}
  onSubmit={handleSubmit}
>
  <Form.OfflineIndicator />
  <Form.Field.String name="name" />
  <Form.Field.String name="email" />
  <Form.SyncStatus />
  <Form.Button.Submit />
</Form>

How It Works

Online — form submits normally via onSubmit
Offline — form data is stored in an IndexedDB/localStorage queue
Back online — queued submissions are replayed in order
Conflict resolution — configurable merge strategy

Components

FormOfflineIndicator

Displays current online/offline status:

<Form.OfflineIndicator />
// Shows: 🟢 Online or 🔴 Offline

FormSyncStatus

Shows sync queue status (pending items count):

<Form.SyncStatus />
// Shows: "3 changes pending sync"

Hooks

useOfflineForm

Low-level hook for custom offline form logic:

const { isOnline, queue, processQueue } = useOfflineForm({
  actionType: 'CREATE_ORDER',
  onQueued: (item) => console.log('Queued:', item),
  onSynced: (item) => console.log('Synced:', item),
})

useOfflineStatus

Simple online/offline status:

const { isOnline } = useOfflineStatus()

useSyncQueue

Access and manage the sync queue:

const { items, clear, retry } = useSyncQueue()

Offline Mode