React

Installation

npm i @golemui/core @golemui/gui-shared @golemui/react @golemui/gui-react --save

Styles

Import the core styles in your application entry point or global stylesheet:

@import '@golemui/gui-components/index.css';

Usage

<GuiForm> only needs a formDef. The framework’s built-in widget set is loaded automatically, and an empty form renders fine without initial data.

import { gui } from '@golemui/gui-shared';
import { GuiForm } from '@golemui/gui-react';

const formDef = [
  gui.inputs.textInput('username', { label: 'Username' }),
];

export function MyForm() {
  return <GuiForm config={{ formDef }} />;
}

import { GuiForm } from '@golemui/gui-react';
import formDef from './my-form.json';

export function MyForm() {
  return <GuiForm config={{ formDef }} />;
}

Adding optional config

Reach for these only when you need them. data prefills the form; customWidgetLoaders is for widgets you’ve built yourself (the framework’s built-ins are merged automatically). Every other config property in the table below follows the same rule — opt in as the form grows.

import { gui } from '@golemui/gui-shared';
import { GuiForm } from '@golemui/gui-react';
import { myCustomWidgets } from './my-custom-widgets';

const formDef = [
  gui.inputs.textInput('username', { label: 'Username' }),
];

export function MyForm() {
  return (
    <GuiForm
      config={{
        formDef,
        data: { username: 'octocat' }, // optional — initial form data
        customWidgetLoaders: myCustomWidgets, // optional — only when the form references widgets you've built yourself
      }}
    />
  );
}

import { GuiForm } from '@golemui/gui-react';
import { myCustomWidgets } from './my-custom-widgets';
import formDef from './my-form.json';

export function MyForm() {
  return (
    <GuiForm
      config={{
        formDef,
        data: { username: 'octocat' }, // optional — initial form data
        customWidgetLoaders: myCustomWidgets, // optional — only when the form references widgets you've built yourself
      }}
    />
  );
}

<GuiForm> props

All initialization properties are bundled in the required config prop (GuiFormInitConfig):

config property	Type	Description
formDef (required)	FormInput	Programmatic gui.* array or parsed JSON form definition.
formSelectors	GslSelectorsInput	GSL selector decorators. Programmatic-only.
formConfig	DxFormConfig	DX engine wiring (loaders, item renderers, dependencies, validateOn, …). Programmatic-only.
data	Record<string, any>	Initial form data.
meta	Record<string, any>	Out-of-band metadata you want to thread through events and state.
customWidgetLoaders	WidgetLoaders<ComponentType<WithWidget>>	Custom widget map; merged with the default React widget set.
itemRenderers	Record<string, ReactItemRenderer<any>>	Custom item-renderer map (for dropdown, list, etc.).
customValidators	CustomValidatorSchemas	Custom validator schemas referenced by validator: { type: 'custom', ... }.
middlewares	Middleware<State, Action>[]	Store middlewares (logging, persistence, devtools).
validateOn	ValidateOn	When validation runs: 'eager' (default), 'change', 'blur', 'submit', or an array.
dependencies	Dependencies	External helpers (e.g. a markdown parser).
localization	I18nTranslator	Translator implementing the I18nTranslator interface.
formName	string	Optional form identifier (useful when you have several forms on a page).

Direct props (outside config):

Prop	Type	Description
formEvent	(event: FormEvent) => void	Callback for events emitted by widgets.
formHealth	(health: FormHealth) => void	Callback that reports the live validation status of the form.
autocomplete	string	Sets the underlying <form> element’s autocomplete attribute.

See Configuration for details on each prop, plus the Programmatic-only vs JSON-form notes.

Custom widgets in React

Build your own widgets with the React-specific hooks useInputWidget, useLayoutWidget, useDisplayWidget, and useActionWidget. They wrap the engine for use inside React components, with stable references and minimal re-renders. See Extending GolemUI / Widgets for the full walkthrough.