# React Component Reference

The following React components are available:

* [#createforms](#createforms "mention")- Visual form builder interface for creating and editing forms
* [#formlist](#formlist "mention") - Display and manage a list of forms with filtering
* [#formviewer](#formviewer "mention") - Display a form for users to fill out and submit
* [#formviewer](#formviewer "mention") - Display a form with an existing submission for viewing or editing
* [#submissionlist](#submissionlist "mention") - Display a table of submissions for a form
* [#submissionviewer](#submissionviewer "mention") - View, edit, or delete a submission
* [#formdelete](#formdelete "mention")- Confirmation dialog for deleting a form
* [#deletesubmission](#deletesubmission "mention") - Confirmation dialog for deleting a submission
* [#formsettings](#formsettings "mention")- Edit form metadata (title, name, path, tags)

## CreateForms

 A comprehensive form builder component that provides a visual interface for creating and editing forms using the Form.io builder.

### Summary <a href="#summary" id="summary"></a>

The `CreateForms` component renders a full-featured form builder with a toolbar for managing form metadata (title, path, display type) and a visual drag-and-drop interface for building forms. It handles form loading, saving, and change tracking automatically.

### Props <a href="#props" id="props"></a>

| Prop                | Type                       | Required | Description                                                 |
| ------------------- | -------------------------- | -------- | ----------------------------------------------------------- |
| `formId`            | `string`                   | No       | ID of the form to edit. If not provided, creates a new form |
| `onChange`          | `(form: FormType) => void` | No       | Callback fired when form structure changes                  |
| `onEditComponent`   | `(component: any) => void` | No       | Callback fired when a component is edited                   |
| `onDeleteComponent` | `(component: any) => void` | No       | Callback fired when a component is deleted                  |
| `onSaveComponent`   | `(component: any) => void` | No       | Callback fired when a component is saved                    |
| `onSaveForm`        | `(form: FormType) => void` | No       | Callback fired when the form is successfully saved          |
| `onUpdateComponent` | `(component: any) => void` | No       | Callback fired when a component is updated                  |
| `onError`           | `(error: Error) => void`   | No       | Callback fired when an error occurs                         |
| `onAddComponent`    | `(component: any) => void` | No       | Callback fired when a component is added                    |
| `Loading`           | `ReactNode`                | No       | Custom loading component to display while loading           |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { CreateForms } from '@formio/enterprise-form-builder-react';

function FormBuilderPage({ formId }: { formId?: string }) {
  const handleSave = (form) => {
    console.log('Form saved:', form);
    // Navigate to form list or show success message
  };

  const handleError = (error) => {
    console.error('Error:', error);
    // Show error notification
  };

  return (
    <CreateForms
      formId={formId}
      onSaveForm={handleSave}
      onError={handleError}
      Loading={<div>Loading form builder...</div>}
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadforms](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadforms "mention") - Load form data
* [#usesaveform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usesaveform "mention") - Save form data
* [#usesaveform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usesaveform "mention")- Load project configuration

## FormList

A component that displays a list of forms with filtering, search, and action capabilities.

### Summary <a href="#summary" id="summary"></a>

The `FormList` component renders a grid of forms with search and tag filtering capabilities. It provides actions for viewing, editing, viewing submissions, and deleting forms. The component handles form loading and pagination automatically.

### Props <a href="#props" id="props"></a>

| Prop               | Type                            | Required | Description                                              |
| ------------------ | ------------------------------- | -------- | -------------------------------------------------------- |
| `onView`           | `() => void`                    | Yes      | Callback fired when a form is clicked to view            |
| `onEdit`           | `() => void`                    | Yes      | Callback fired when edit action is triggered             |
| `onViewSubmission` | `() => void`                    | Yes      | Callback fired when view submissions action is triggered |
| `onError`          | `(error: Error) => void`        | No       | Callback fired when an error occurs                      |
| `onDelete`         | `() => void`                    | No       | Callback fired after successful form deletion            |
| `components`       | `FormGridProps['components']`   | No       | Custom components for rendering form grid items          |
| `deleteComponents` | `FormDeleteProps['components']` | No       | Custom components for delete confirmation dialog         |
| `limit`            | `number`                        | No       | Maximum number of forms to load per page (default: 10)   |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { FormList } from '@formio/enterprise-form-builder-react';
import { useNavigate } from 'react-router-dom';

function FormsPage() {
  const navigate = useNavigate();

  return (
    <FormList
      onView={(formId) => navigate(`/forms/${formId}`)}
      onEdit={(formId) => navigate(`/forms/${formId}/edit`)}
      onViewSubmission={(formId) => navigate(`/forms/${formId}/submissions`)}
      onDelete={() => {
        console.log('Form deleted');
        // Refresh list or show notification
      }}
      onError={(error) => console.error('Error:', error)}
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadforms](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadforms "mention")- Load forms list
* [#usedeleteform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usedeleteform "mention")- Delete forms
* [#formdelete](#formdelete "mention")- Delete confirmation component

## FormViewer

A component that displays a form for users to fill out and submit.

### Summary <a href="#summary" id="summary"></a>

The `FormViewer` component loads and renders a form by ID, allowing users to fill it out and submit it. It handles form loading, submission, and error states automatically.

### Props <a href="#props" id="props"></a>

| Prop            | Type                                              | Required | Description                                                          |
| --------------- | ------------------------------------------------- | -------- | -------------------------------------------------------------------- |
| `formId`        | `string`                                          | Yes      | ID of the form to display                                            |
| `onSubmit`      | `(submission: FormioSubmission) => Promise<void>` | No       | Callback fired when form is submitted                                |
| `onError`       | `(error: Error) => void`                          | No       | Callback fired when an error occurs                                  |
| `submitting`    | `boolean`                                         | No       | Whether the form is currently being submitted                        |
| `showInfoAlert` | `boolean`                                         | No       | Whether to show an info alert above the form (default: `true`)       |
| `className`     | `string`                                          | No       | Additional CSS classes to apply                                      |
| `options`       | `object`                                          | No       | Options to pass to the Form component (e.g., `noAlerts`, `readOnly`) |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { FormViewer } from '@formio/enterprise-form-builder-react';
import { useState } from 'react';

function FormFillPage({ formId }: { formId: string }) {
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (submission) => {
    setSubmitting(true);
    try {
      // Save submission or send to API
      console.log('Submission:', submission);
      // Navigate to success page
    } catch (error) {
      console.error('Error submitting:', error);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <FormViewer
      formId={formId}
      onSubmit={handleSubmit}
      submitting={submitting}
      options={{ noAlerts: true }}
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadform "mention")- Load form data
* [#usesavesubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usesavesubmission "mention")- Save form submission

## UseForm

A component that displays a form with an existing submission for viewing or editing.

### Summary <a href="#summary" id="summary"></a>

The `UseForm` component loads both a form and a submission, then renders the form with the submission data pre-filled. It supports both view and edit modes.

### Props <a href="#props" id="props"></a>

| Prop             | Type                                        | Required | Description                                                                                   |
| ---------------- | ------------------------------------------- | -------- | --------------------------------------------------------------------------------------------- |
| `formId`         | `string`                                    | Yes      | ID of the form to display                                                                     |
| `submissionId`   | `string`                                    | Yes      | ID of the submission to load                                                                  |
| `submissionMode` | `'view' \| 'edit'`                          | No       | Mode for the form - 'view' renders read-only, 'edit' allows modifications (default: `'view'`) |
| `onSubmit`       | `(submission: Submission) => Promise<void>` | Yes      | Callback fired when form is submitted (in edit mode)                                          |
| `onError`        | `(error: Error) => void`                    | No       | Callback fired when an error occurs                                                           |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { UseForm } from '@formio/enterprise-form-builder-react';

function EditSubmissionPage({ 
  formId, 
  submissionId 
}: { 
  formId: string; 
  submissionId: string;
}) {
  const handleSubmit = async (submission) => {
    console.log('Submission updated:', submission);
    // Navigate back or show success message
  };

  return (
    <UseForm
      formId={formId}
      submissionId={submissionId}
      submissionMode="edit"
      onSubmit={handleSubmit}
      onError={(error) => console.error('Error:', error)}
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadform "mention")- Load form data
* [#useloadsubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadsubmission "mention")- Load submission data
* [#usesavesubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usesavesubmission "mention") - Save submission data

## SubmissionList

A component that displays a table of submissions for a specific form.

### Summary <a href="#summary" id="summary"></a>

The `SubmissionList` component renders a paginated table showing all submissions for a given form. It provides click handlers for viewing individual submissions and supports custom table components.

### Props <a href="#props" id="props"></a>

| Prop                | Type                             | Required | Description                                                                                          |
| ------------------- | -------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
| `formId`            | `string`                         | Yes      | ID of the form whose submissions to display                                                          |
| `limit`             | `number`                         | No       | Number of submissions per page (default: `10`)                                                       |
| `onSubmissionClick` | `(submissionId: string) => void` | No       | Callback fired when a submission row is clicked                                                      |
| `className`         | `string`                         | No       | Additional CSS classes to apply                                                                      |
| `tableComponents`   | `object`                         | No       | Custom components for rendering table elements (Container, TableContainer, TableHeadContainer, etc.) |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { SubmissionList } from '@formio/enterprise-form-builder-react';
import { useNavigate } from 'react-router-dom';

function SubmissionsPage({ formId }: { formId: string }) {
  const navigate = useNavigate();

  return (
    <SubmissionList
      formId={formId}
      limit={20}
      onSubmissionClick={(submissionId) => {
        navigate(`/forms/${formId}/submissions/${submissionId}`);
      }}
    />
  );
}
```

### Related Components <a href="#related-components" id="related-components"></a>

* [`SubmissionViewer`](https://file+.vscode-resource.vscode-cdn.net/Users/mslavin/FormioCodebase/nirvana/packages/enterprise-form-builder-react/docs/components/SubmissionViewer.md) - View individual submissions

## SubmissionViewer

A component that displays a submission with options to view, edit, or delete it.

### Summary <a href="#summary" id="summary"></a>

The `SubmissionViewer` component loads and displays a submission with a header containing action buttons. It supports viewing, editing, and deleting submissions, with different modes for each operation.

### Props <a href="#props" id="props"></a>

| Prop           | Type                                              | Required | Description                                                      |
| -------------- | ------------------------------------------------- | -------- | ---------------------------------------------------------------- |
| `formId`       | `string`                                          | Yes      | ID of the form the submission belongs to                         |
| `submissionId` | `string`                                          | Yes      | ID of the submission to display                                  |
| `onSave`       | `(submission: FormioSubmission) => Promise<void>` | No       | Callback fired when submission is saved (in edit mode)           |
| `onCancel`     | `() => void`                                      | No       | Callback fired when cancel action is triggered                   |
| `onBack`       | `() => void`                                      | No       | Callback fired when back button is clicked                       |
| `onError`      | `(error: Error) => void`                          | No       | Callback fired when an error occurs                              |
| `className`    | `string`                                          | No       | Additional CSS classes to apply                                  |
| `showHeader`   | `boolean`                                         | No       | Whether to show the header with action buttons (default: `true`) |
| `formTitle`    | `string`                                          | No       | Title of the form to display in the header                       |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { SubmissionViewer } from '@formio/enterprise-form-builder-react';
import { useNavigate } from 'react-router-dom';

function ViewSubmissionPage({ 
  formId, 
  submissionId 
}: { 
  formId: string; 
  submissionId: string;
}) {
  const navigate = useNavigate();

  const handleSave = async (submission) => {
    console.log('Submission saved:', submission);
    navigate(`/forms/${formId}/submissions`);
  };

  const handleBack = () => {
    navigate(`/forms/${formId}/submissions`);
  };

  return (
    <SubmissionViewer
      formId={formId}
      submissionId={submissionId}
      onSave={handleSave}
      onBack={handleBack}
      onError={(error) => console.error('Error:', error)}
      formTitle="My Form"
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadsubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadsubmission "mention")- Load submission data
* [#usesavesubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usesavesubmission "mention")- Save submission data
* [#usedeletesubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usedeletesubmission "mention")- Delete submission component

## FormDelete

A component that provides a confirmation dialog for deleting a form.

### Summary <a href="#summary" id="summary"></a>

The `FormDelete` component renders a confirmation dialog with customizable components for the message and action buttons. It handles the deletion process and provides callbacks for success and cancellation.

### Props <a href="#props" id="props"></a>

| Prop              | Type                         | Required | Description                                             |
| ----------------- | ---------------------------- | -------- | ------------------------------------------------------- |
| `form`            | `FormType & { _id: string }` | Yes      | The form object to delete (must include `_id`)          |
| `onDeleteSuccess` | `() => void`                 | No       | Callback fired when deletion is successful              |
| `onCancel`        | `() => void`                 | No       | Callback fired when deletion is cancelled               |
| `components`      | `object`                     | No       | Custom components for rendering the confirmation dialog |

### Custom Components <a href="#custom-components" id="custom-components"></a>

The `components` prop accepts an object with optional custom components:

* `ConfirmationDialog`: Container component for the dialog
* `ConfirmationMessage`: Component that displays the confirmation message
* `ConfirmationButtons`: Component that renders the action buttons

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { FormDelete } from '@formio/enterprise-form-builder-react';

function DeleteFormModal({ form, onClose, onDeleted }) {
  return (
    <div className="modal show">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-body">
            <FormDelete
              form={form}
              onDeleteSuccess={() => {
                onDeleted();
                onClose();
              }}
              onCancel={onClose}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#usedeleteform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usedeleteform "mention")- Delete form functionality

## DeleteSubmission

A component that provides a confirmation dialog for deleting a submission.

### Summary <a href="#summary" id="summary"></a>

The `DeleteSubmission` component renders a simple confirmation dialog for deleting a submission. It handles the deletion process and provides callbacks for success, cancellation, and errors.

### Props <a href="#props" id="props"></a>

| Prop           | Type                      | Required | Description                                                                                          |
| -------------- | ------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
| `formId`       | `string`                  | Yes      | ID of the form the submission belongs to                                                             |
| `submissionId` | `string`                  | Yes      | ID of the submission to delete                                                                       |
| `onCancel`     | `() => void`              | No       | Callback fired when deletion is cancelled                                                            |
| `onDeleted`    | `() => void`              | No       | Callback fired when deletion is successful                                                           |
| `onError`      | `(error: string) => void` | No       | Callback fired when an error occurs                                                                  |
| `title`        | `string`                  | No       | Custom title for the confirmation dialog (default: `'Are you sure you wish to delete this record?'`) |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { DeleteSubmission } from '@formio/enterprise-form-builder-react';

function DeleteSubmissionModal({ 
  formId, 
  submissionId, 
  onClose, 
  onDeleted 
}) {
  return (
    <div className="modal show">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-body">
            <DeleteSubmission
              formId={formId}
              submissionId={submissionId}
              onDeleted={() => {
                onDeleted();
                onClose();
              }}
              onCancel={onClose}
              onError={(error) => console.error('Delete error:', error)}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#usedeletesubmission](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usedeletesubmission "mention") - Delete submission functionality

## FormSettings

A component that provides a form for editing form metadata (title, name, path, tags) and includes a delete form option.

### Summary <a href="#summary" id="summary"></a>

The `FormSettings` component renders a form for editing form settings and includes a "Danger Zone" section with a delete form button. It handles loading, saving, and error states automatically.

### Props <a href="#props" id="props"></a>

| Prop                 | Type                       | Required | Description                                         |
| -------------------- | -------------------------- | -------- | --------------------------------------------------- |
| `formId`             | `string`                   | No       | ID of the form to edit settings for                 |
| `Loading`            | `ReactNode`                | No       | Custom loading component to display while loading   |
| `onSaveSettingsForm` | `(form: FormType) => void` | No       | Callback fired when settings are successfully saved |
| `onError`            | `(error: Error) => void`   | No       | Callback fired when an error occurs                 |
| `onFormDelete`       | `() => void`               | No       | Callback fired when form is successfully deleted    |

### Usage Example <a href="#usage-example" id="usage-example"></a>

```tsx
import { FormSettings } from '@formio/enterprise-form-builder-react';

function SettingsPage({ formId }: { formId: string }) {
  const handleSave = (form) => {
    console.log('Settings saved:', form);
    // Show success notification
  };

  const handleDelete = () => {
    console.log('Form deleted');
    // Navigate to form list
  };

  return (
    <FormSettings
      formId={formId}
      onSaveSettingsForm={handleSave}
      onFormDelete={handleDelete}
      onError={(error) => console.error('Error:', error)}
    />
  );
}
```

### Related Hooks <a href="#related-hooks" id="related-hooks"></a>

* [#useloadform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#useloadform "mention")- Load form data
* [#usedeleteform](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-hook-reference#usedeleteform "mention") - Save form settings
* [#formdelete](#formdelete "mention") - Delete form component