form-builder

Appearance

useJsonForm ​

Creates a Formisch form for a definition, with its schema and initial input from the builder, and the state <JsonFields> renders.

ts
const jsonForm = useJsonForm(definition, options)
const jsonForm = useJsonForm<TInput, TOutput>(definition, options)

Generics ​

  • TInput extends object
  • TOutput extends object

Parameters ​

Explanation ​

A definition with issues throws the builder's DefinitionError, so run validate() first when it comes from outside your code. Like Formisch's useForm, it reads the definition, the builder and the validation modes on the first render: give the component a new key to use another definition. The components and layout components are read on every render.

With conditions, it clears the fields they clear as soon as they do, with Formisch's setInput, wherever the fields are rendered. With your input type, and your output type when it differs, the form is typed, so Formisch checks paths and values. See TypeScript.

Returns ​

Example ​

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

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

  function save(output: unknown) {
    // { email: 'jane@example.com', password: 'correct horse', newsletter: true }
    console.log(output)
  }

  return (
    <Form of={jsonForm.form} onSubmit={save}>
      <JsonFields of={jsonForm} />
      <button type="submit">Sign up</button>
    </Form>
  )
}

Guides ​

Components ​