Comment on page
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.
React SDK - Previous
TutimWizard
Next - React SDK
Next & Gatsby
Last modified 7mo ago