createRegistry

Binds widgets, form components and structure slots to the TanStack contexts.

Binds widgets, form components and structure slots to the app's TanStack contexts and returns a registry, the value every form of the app is built with.

Create the contexts with TanStack's createFormHookContexts() in a module of their own, so a form component can read the form through useFormContext() without importing the registry.

Type parameters

NameDescription
TWidgetsThe widgets by name; each takes its field as a prop typed FieldOf<V>.
TFormComponentsThe form components by name, placed in a layout by { component }.
TStructureThe structure slots: body, section, row and arrayFrame.

Parameters

NameDescription
configThe contexts and what the registry holds.
config.fieldContextThe field context from createFormHookContexts().
config.formContextThe form context from createFormHookContexts().
config.widgetsThe widgets by name.
config.formComponentsThe form components by name.
config.structureThe components that render the structure slots.

Defaults

  • config.formComponents and config.structure: none registered.

Returns

The registry.

Example

'use client'
import { createRegistry } from '@formdef/core'
import { fieldContext, formContext } from './context'

export const registry = createRegistry({
  fieldContext,
  formContext,
  widgets: { text: TextField, checkbox: CheckboxField },
  formComponents: { SubmitButton },
  structure: { section: Section },
})

See also