API reference
Everything the two packages export.
@hardikrastogi/react
FormRenderer
| Prop | Type | Notes |
|---|---|---|
definition | FormDefinitionInput | Required. Parsed and validated first; an invalid one renders an explanation. |
onSubmit | (answers) => void | Promise | Called with clean answers only when valid. Throw to show an error under the form. |
registry | FieldPluginRegistry | Defaults to the eight built-in types. |
defaultValues | Record<string, unknown> | Pre-fill answers, keyed by field id. |
classNames | Partial slot map | See theming. |
submitLabel, disabled, className | string, boolean, string | Button 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 parseddefinition, anydefinitionIssues, the layoutrows, the react-hook-form instance asform,submit,submitErrorandisSubmitting. 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.parseor.safeParse.validateSubmission(definition, answers): returns{ success, errors }whereerrorsmaps 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,FieldTypePluginand 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 emptyFormDefinitionto start from.loadFromStorage(key): reads a definition the builder autosaved to local storage, ornull.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.