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:

npm install @tutim/headless

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:

npm install @tutim/fields

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:

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 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.

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':

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.