Comment on page
FormProvider
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.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
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.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
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.
Last modified 7mo ago