API reference

Everything the two packages export.

@hardikrastogi/react

FormRenderer

PropTypeNotes
definitionFormDefinitionInputRequired. Parsed and validated first; an invalid one renders an explanation.
onSubmit(answers) => void | PromiseCalled with clean answers only when valid. Throw to show an error under the form.
registryFieldPluginRegistryDefaults to the eight built-in types.
defaultValuesRecord<string, unknown>Pre-fill answers, keyed by field id.
classNamesPartial slot mapSee theming.
submitLabel, disabled, classNamestring, boolean, stringButton text (default "Submit"), disable the whole form, extra class on the form.

Other exports

  • useFormRenderer(definition, options): the headless hook behind the component. Returns the parsed definition, any definitionIssues, the layout rows, the react-hook-form instance as form, submit, submitError and isSubmitting. Use it to build your own markup.
  • createDefaultRegistry(): a fresh registry with the built-in types to add your own to.
  • defaultFieldPlugins: the array of built-in plugins.
  • themeToCssVars(theme), fieldStyleToCssVars(style, span): the theme as inline CSS variables.
  • collectErrors(definition, registry, answers): run the same validation the form runs.
  • Types: FieldRendererProps, ReactFieldPlugin, FormClassNames, LabelKind, Answers.

@hardikrastogi/core

  • FormDefinitionSchema, FormSubmissionSchema: Zod schemas. Use .parse or .safeParse.
  • validateSubmission(definition, answers): returns { success, errors } where errors maps field id to a list of messages.
  • FieldPluginRegistry: register, get, has, list. Registering the same type twice throws.
  • isSubmissionCurrent(submission, definition), bumpSchemaVersion(definition): versioning helpers.
  • Building blocks: FieldConfigSchema, FieldValidationSchema, FieldStyleSchema, LayoutSchema, ThemeSchema, LogicSchema, FIELD_ID_PATTERN.
  • Types: FormDefinition, FormDefinitionInput, FormSubmission, FieldConfig, Theme, FieldTypePlugin and more.

@hardikrastogi/react/server

A separate, server-safe entry point with no React in it. The main entry is a client bundle, and frameworks such as Next.js refuse to load anything from it in server code, so server checks live here instead.

  • collectServerErrors(definition, answers): returns { [fieldId]: string[] }. Runs core's required, length, range and pattern rules plus the email and URL format checks, the same combination the form runs in the browser. An empty object means the answers are valid. A custom field type that only exists in the browser cannot be re-checked here.

@hardikrastogi/builder

  • Builder: the editor. Props: initialDefinition (required), storageKey, onSave, onPublish, onUnpublish, initialPublished. See the builder page for what each does.
  • createBlankDefinition(id, name?): an empty FormDefinition to start from.
  • loadFromStorage(key): reads a definition the builder autosaved to local storage, or null.
  • FIELD_CATALOG, FIELD_CATEGORIES, fieldMetaFor(type): the field types shown in the palette.
  • createBuilderStore, BuilderProvider, useBuilder(selector): the state behind the editor, for building your own UI around it.
  • contrastAgainstWhite(hex), WCAG_AA_NORMAL_TEXT: the accessibility contrast check used on the theme colour.
  • Types: BuilderProps, PublishResult, PublishState, BuilderStore, FieldTypeMeta.