# React Applications

Within a React application, the Enterprise Form Builder Moduler provides a suite of components and hooks that enable form building within an application while using the enterprise features available in Form.io.

In keeping with React application building conventions, it is a collection of components and does not utilize any third party routing or state management. Those capabililites remain in the domain of the application using the components.

All of the core interaction with the Form.io server is separated into hooks, so they can be used independent of the the UI components provided.

To begin using the Enterprise Form Builder Module within a React application, complete the following steps:

## Installation

To install the React Enterprise Form Builder package, use the following command:

```bash
npm install @formio/enterprise-form-builder-react
```

### **Required Peer Dependencies**

This package relies on both `@formio/react` and `@formio/js` as peer dependencies. They must be installed in the project if they are not already present:

```bash
npm install @formio/react @formio/js
```

Make sure the versions of `@formio/react` and `@formio/js` meet the minimum requirements specified in the package's `peerDependencies`.

## Setup <a href="#setup" id="setup"></a>

To use the Enterprise Form Builder in a React app, configure the required context providers at the top level of the application, just as in the `react-efb-demo` app.

The `EnterpriseFormBuilderProvider` must be a child of the `FormioProvider` in the application's component tree. Configure the `Formio` library with the license key and any additional client libraries.

Here is a minimal example of how to wrap an application:

```jsx
import React from 'react';
import { EnterpriseFormBuilderProvider } from '@formio/enterprise-form-builder-react';
import { FormioProvider } from '@formio/react';

const licenseKey = 'YOUR_ENTERPRISE_LICENSE_KEY'; // Replace with your license key

function App() {
  return (
    <FormioProvider
      projectUrl="https://your-project.form.io"   // <-- Change to your Form.io project URL
      baseUrl="https://your-domain.form.io"        // <-- Change to your Form.io base URL
    >
      <EnterpriseFormBuilderProvider licenseKey={licenseKey} tag="common">
        {/* Your app content and routing here */}
      </EnterpriseFormBuilderProvider>
    </FormioProvider>
  );
}

export default App;
```

**Notes:**

* The `FormioProvider` sets up Form.io project context for all children.
* The `EnterpriseFormBuilderProvider` enables the enterprise builder features and requires a valid license key.
* The `tag` prop is used to group forms that are available to the Enterprise Form Builder. New forms will be added with this tag and only Forms with the tag will be displayed.
* Wrap your app's router or main content with these providers.

## Error Handling <a href="#error-handling" id="error-handling"></a>

There are two ways to handle errors that come from the Enterprise Form Builder components:

* Each component has an `onError` callback function to allow you to handle the error as needed.
* If the `onError` callback is not provided, the error will be thrown. This allows you to use a global error handler such as a [React Error Boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) to catch and handle errors in your application.

## Providers <a href="#providers" id="providers"></a>

&#x20;The [EnterpriseFormBuilderProvider](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-applications/react-context-provider) is the context provider for enterprise form builder functionality. Refer to the [react-context-provider](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-applications/react-context-provider "mention")reference for more information.

## Components <a href="#components" id="components"></a>

The following components are available within React apps. Refer to the [React Component Reference](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-applications/react-component-reference) for more detailed information.

* 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
* UseForm - 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)

## Hooks <a href="#hooks" id="hooks"></a>

All hooks provided by the Enterprise Form Builder follow a consistent pattern: each hook returns an action function (such as `loadForm`, `saveForm`, `deleteForm`, etc.) that performs the associated operation, along with state properties that allow you to track the progress and result of the operation. These state properties typically include:

* `loading`: `boolean` — Indicates if the operation is currently in progress.
* `error`: `string | null` — Holds any error message if the operation fails, otherwise `null`.
* `success`: `boolean` — (For actions such as save or delete) Indicates if the operation was successful.
* Data property: The returned data from the operation, if applicable (such as `form`, `forms`, `submission`, etc.).

This pattern allows you to call the action function as needed (for example, in response to a button click or effect), and use the returned state properties in your component’s UI to provide feedback, handle errors, or display loading indicators.

The list of available hooks are listed below. Refer to the [React Hooks Reference](https://help.form.io/userguide/enterprise-form-builder-module/application-integration/react-applications/react-hook-reference) for more information:

* useEnterpriseFormBuilder - Access the enterprise form builder context
* useLoadForm - Load a single form by ID
* useLoadForms - Load multiple forms with optional query parameters
* useSaveForm - Save forms with optional conflict resolution
* useDeleteForm - Delete a form by ID
* useLoadSubmission - Load a single submission by form ID and submission ID
* useSaveSubmission - Save a submission
* useDeleteSubmission - Delete a submission
* useLoadProject - Load Form.io project information