form-builder

Appearance

JsonField ​

Renders one field of a useJsonForm form, wherever you put it inside Formisch's <Form>.

ts
<JsonField of={jsonForm} path="coupon" />

Parameters ​

  • of AnyJsonFormInstance: what useJsonForm returned
  • path string: the field's dot path, like 'address.city'
  • components FieldComponents: optional, defaults to those useJsonForm got

Explanation ​

A group or a list comes with its fields. Leave the field out of <JsonFields> with except, so it renders once. It renders nothing while conditions hide the field. A path that names no field, or a field of a list's items, throws a TypeError.

Example ​

tsx
import { Form } from '@formisch/react'
import type { JsonForm } from '@whatsaaaa/form-builder-schema'
import {
  JsonField,
  JsonFields,
  useJsonForm,
} from '@whatsaaaa/form-builder-react'
import { components } from './all-fields'

export function OrderForm({ definition }: { definition: JsonForm }) {
  const jsonForm = useJsonForm(definition, { components })

  function save(output: unknown) {
    console.log(output)
  }

  return (
    <Form of={jsonForm.form} onSubmit={save}>
      <main>
        <JsonFields of={jsonForm} except={['coupon', 'acceptTerms']} />
      </main>
      <aside>
        <JsonField of={jsonForm} path="coupon" />
        <JsonField of={jsonForm} path="acceptTerms" />
        <button type="submit">Place order</button>
      </aside>
    </Form>
  )
}

Guides ​

Components ​