# FormProvider

## Overview

`FormProvider` is a component that allows you to define the wizard fields that you want to use in your react application. It provides a way to specify the field components that will be used to render the wizard fields, and allows you to use either the default field components provided by the `@tutim/fields` library, or your own custom field components.

## Installation

To use `FormProvider`, you will need to install the `@tutim/headless` library in your react project. You can do this using npm or yarn:

```bash
npm install @tutim/headless
```

```bash
yarn add @tutim/headless
```

You will also need to install the `@tutim/fields` library if you want to use the default field components provided by the library. You can do this using npm or yarn:

```bash
npm install @tutim/fields
```

```bash
yarn add @tutim/fields
```

## Basic example

To use `FormProvider`, you will need to wrap your react application with the `FormProvider` component and specify the field components that you want to use. You can do this by passing a `fieldComponents` prop to the `FormProvider` component, which should be an object with keys that match the `type` of the fields you want to use, and values that are the field components themselves.

For example, you can use `FormProvider` to specify the default field components provided by the `@tutim/fields` library, or you can create your own custom field components and use them in the wizard.

Here is an example of how to use `FormProvider` to specify the default field components provided by the `@tutim/fields` library:

```jsx
import { FormProvider } from '@tutim/headless';
import { defaultFields, TutimWizard } from '@tutim/fields';

const App = (): JSX.Element => {
  return (
    <div className="App">
      <FormProvider fieldComponents={defaultFields}>
        <TutimWizard onSubmit={console.log} config={{ fields: [{ key: 'field1' }] }} />
      </FormProvider>
    </div>
  );
};

export default App;
```

This will render a form with a single field, using the default field component provided by the `@tutim/fields` library. When the form is submitted, the data entered into the field will be logged to the console.

## Remote schema example

Forms built on the [`Admin Portal`](https://github.com/tutim-io/docs/blob/main/react-sdk/broken-reference/README.md) could be served in real-time using the `FormProvider`

add `clientId` to your `FormProvider Options`

use `formId` in your forms instead of config in `TutimWizard` , `useForm` or if you want to manipulate the config, you could also use it with `useFormConfig`.

```jsx
import { TutimWizard, defaultFields } from "@tutim/fields";
import { FormProvider } from "@tutim/headless";

const App = () => {
  return (
    <FormProvider
      fieldComponents={defaultFields}
      options={{ clientId: "INSERT_CLIENT_ID_HERE" }}
    >
      <TutimWizard onSubmit={console.log} formId="INSERT_FORM_ID_HERE" />
    </FormProvider>
  );
};

export default App;
```

You can customize the form fields by creating your own custom field components and using them

## Advanced example

You can customize the form fields by creating your own custom field components and using them with `FormProvider`. To do this, you will need to define the custom field components and add them to the `fieldComponents` object passed to the `FormProvider` component.

For example, you can create a custom field component that renders a button that increments a number when clicked, and use it in the form by specifying the `type` of the field as `'custom-field'`:

```javascript
import { FormProvider } from '@tutim/headless';
import { Field, FieldComponents, InputType } from '@tutim/types';

export const CustomField: Field = ({ inputProps, fieldConfig }) => {
  const { value, onChange } = inputProps;
  const onClick = () => onChange(value + 2);
  return (
    <button type="button" onClick={onClick}>
      {fieldConfig.label}: {value}
    </button>
  );
};

const fieldComponents: FieldComponents = {
  [InputType.Text]: ({ inputProps }) => <input {...inputProps} />,
  'custom-field': (fieldProps) => <CustomField {...fieldProps} />,
  // add any type of input and reference it by 'type'
};

const App = (): JSX.Element => {
  return (
    <div className="App">
      <FormProvider fieldComponents={fieldComponents}>
        <TutimWizard
          onSubmit={console.log}
          config={{
            fields: [
              { key: 'textField', label: 'Text Field', type: 'text' },
              { key: 'customField', label: 'Custom Field', type: 'custom-field', defaultValue: 0 },
            ],
          }}
        />
      </FormProvider>
    </div>
  );
};

export default App;
```

This will render a form with two fields: a text input field and a custom field that renders a button. The custom field will increment its value by 2 every time the button is clicked. When the form is submitted, the data entered into the fields will be logged to the console.