@playfast/forms-react

Typed JSX mapping for @playfast/forms — turn a form view into scoped field/array/variant helpers, no bundled widgets.

FormUi.make wires a @playfast/forms view (provided in a @playfast/reform contract's form prop) to your own React components. It owns no state and ships no DOM widgets — it maps the typed schema to JSX so your layout cannot drift from it.

import { FormUi } from '@playfast/reform-forms-react'

export const CheckoutUi = FormUi.make(CheckoutContract, CheckoutForm, ({ field, array, variant, form }) => (
  <Screen>
    {field('email').as(EmailInput, { label: 'Email' })}
    {array('items', ({ items, append }) => (
      <Stack>
        {items.map((item) => (
          <Row key={item.key}>
            {item.field('name').as(TextInput)}
            <IconButton onPress={item.remove} />
          </Row>
        ))}
        <Button onPress={() => append()}>Add</Button>
      </Stack>
    ))}
    {variant('payment', {
      Card: ({ field }) => field('cardNumber').as(CardNumberInput),
      Paypal: ({ field }) => field('email').as(EmailInput),
    })}
    <Button disabled={!form.canSubmit} onPress={form.submit}>Submit</Button>
  </Screen>
))

The render callback receives scoped helpers (field / array / variant), the underlying form view, and the contract props. field(path).as(Component, props?) returns a ReactNode whose component gets a typed field: FieldBinding<A> prop. array and variant scopes expose the same helpers relative to that scope.

Full API: playbook/api.doc.md. Pairs with core @playfast/reform, form state @playfast/forms, and the React host @playfast/reform-react.

License

MIT