React

Installation

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

Styles

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

@import '@golemui/core/styles/index.css';

Usage

Programmatic

import { golemForm } from '@golemui/gui-shared';
import { FormComponent } from '@golemui/gui-react';
import * as GuiReact from '@golemui/gui-react';

const formDef = golemForm().create({
  form: [
    { kind: 'input', type: 'textinput', path: 'username', label: 'Username' },
  ],
});

export function MyForm() {
  return (
    <FormComponent
      formDef={formDef}
      data={{ username: '' }}
      widgetLoaders={{ ...GuiReact.widgetLoaders }}
    />
  );
}

JSON

import { FormComponent } from '@golemui/gui-react';
import * as GuiReact from '@golemui/gui-react';
import formDef from './my-form.json';

export function MyForm() {
  return (
    <FormComponent
      formDef={formDef}
      data={{ username: '' }}
      widgetLoaders={{ ...GuiReact.widgetLoaders }}
    />
  );
}

Component Props

Prop	Type	Description
formDef	Form	The form definition object
data	object	Initial form data
widgetLoaders	WidgetLoaders	Map of widget type loaders (e.g. GolemUI components)
validators	ValidatorFn	Validator function (from initValidators())
customValidators	CustomValidatorSchemas	Custom validator schemas
validateOn	ValidateOn	When to trigger validation
dependencies	Dependencies	External dependencies (e.g. markdown parser)
localization	Localization	i18n/localization configuration

See Configuration for details on each optional prop.