Skip to main content

FormRenderer()

function FormRenderer<T>(__namedParameters): ReactNode;

Defined in: core/render/form-renderer.tsx:67

FormRenderer - рендеринг формы на основе RenderSchema

Принимает форму и функцию рендеринга, возвращает готовый React-компонент. RenderSchema определяет структуру страницы: расположение полей, контейнеры, секции и условия отображения.

Type Parameters​

T​

T

Parameters​

__namedParameters​

FormRendererProps<T>

Returns​

ReactNode

Example​

const renderSchema: RenderSchemaFn<MyForm> = (path) => ({
  component: Box,
  componentProps: {
    className: 'flex flex-col gap-6',
    children: [
      {
        component: Section,
        componentProps: {
          title: 'Личные данные',
          className: 'grid grid-cols-2 gap-4',
          children: [
            { component: path.firstName },
            { component: path.lastName },
            { component: path.email, componentProps: { className: 'col-span-2' } },
          ],
        },
      },
      {
        component: Section,
        componentProps: {
          title: 'Адрес',
          hidden: (form) => !form.needsAddress.value.value,
          children: [
            { component: path.address.city },
            { component: path.address.street },
          ],
        },
      },
    ],
  },
});

function MyFormPage() {
  const form = useForm(schema);

  return (
    <form onSubmit={handleSubmit}>
      <FormRenderer form={form} render={renderSchema} />
      <button type="submit">Отправить</button>
    </form>
  );
}