form-builder

Appearance

FieldComponents ​

Your component for each field type, by type name: { text: TextInput, group: GroupFieldset }. Each one gets the props of its type's role.

ts
type FieldComponents = Record<
  string,
  | ComponentType<ValueFieldProps>
  | ComponentType<GroupFieldProps>
  | ComponentType<ArrayFieldProps>
  | ComponentType<DisplayFieldProps>
>

Explanation ​

See field components.

ValueFieldProps ​

  • ValueFieldProps
    • field JsonField: the field from the definition
    • path FieldPath: its Formisch path, with real indexes
    • kind ValueKind: the kind of its value
    • required boolean: whether the definition makes it required
    • input unknown: its current input
    • errors [string, ...string[]] | null: its error messages
    • inputProps FieldElementProps: Formisch's element props, to spread on the input element
    • setInput (input: unknown) => void: sets the input, after turning what an element gives into the value of its kind

GroupFieldProps ​

  • GroupFieldProps
    • field JsonField
    • path FieldPath
    • children ReactNode: the group's fields

ArrayFieldProps ​

  • ArrayFieldProps
    • field JsonField
    • path FieldPath
    • items string[]: one id per item, to use as its key
    • errors [string, ...string[]] | null: the list's own messages
    • add () => void: adds an item at the end
    • remove (index: number) => void
    • move (from: number, to: number) => void
    • children (index: number) => ReactNode: renders the fields of the item at index

DisplayFieldProps ​

Example ​

ts
import type { FieldComponents } from '@whatsaaaa/form-builder-react'
import { CheckboxInput } from './CheckboxInput'
import { GroupFieldset } from './GroupFieldset'
import { FileInput } from './FileInput'
import { FormHeading } from './FormHeading'
import { ListRepeater } from './ListRepeater'
import { SelectInput } from './SelectInput'
import { TextInput } from './TextInput'

export const components: FieldComponents = {
  text: TextInput,
  email: TextInput,
  number: TextInput,
  checkbox: CheckboxInput,
  select: SelectInput,
  radio: SelectInput,
  file: FileInput,
  group: GroupFieldset,
  array: ListRepeater,
  heading: FormHeading,
  // ...one for every type your definitions use
}

Types ​