React Component Reference

The following React components are available:

• CreateForms- Visual form builder interface for creating and editing forms

• FormList - Display and manage a list of forms with filtering

• FormViewer - Display a form for users to fill out and submit

• FormViewer - Display a form with an existing submission for viewing or editing

• SubmissionList - Display a table of submissions for a form

• SubmissionViewer - View, edit, or delete a submission

• FormDelete- Confirmation dialog for deleting a form

• DeleteSubmission - Confirmation dialog for deleting a submission

• FormSettings- 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

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

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

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

• useLoadForms - Load form data

• useSaveForm - Save form data

• useSaveForm- Load project configuration

FormList

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

Summary

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

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

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

• useLoadForms- Load forms list

• useDeleteForm- Delete forms

• FormDelete- Delete confirmation component

FormViewer

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

Summary

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

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

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

• useLoadForm- Load form data

• useSaveSubmission- Save form submission

UseForm

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

Summary

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

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

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

• useLoadForm- Load form data

• useLoadSubmission- Load submission data

• useSaveSubmission - Save submission data

SubmissionList

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

Summary

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

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

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

• SubmissionViewer - View individual submissions

SubmissionViewer

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

Summary

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

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

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

• useLoadSubmission- Load submission data

• useSaveSubmission- Save submission data

• useDeleteSubmission- Delete submission component

FormDelete

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

Summary

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

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

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

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

• useDeleteForm- Delete form functionality

DeleteSubmission

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

Summary

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

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

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

• useDeleteSubmission - 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

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

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

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

• useLoadForm- Load form data

• useDeleteForm - Save form settings

• FormDelete - Delete form component