In order to successfully render a form via FormRenderer you need to assign component mappers. Component mapper is an object of React components, where key is a component identifier and value is the component or an object with the component and globally defined props. Each component in mapper must have an unique key, which corresponds to componentType in the schema. Keys names can be chosen but there are some predefined constants which cover most common component types. Use these to prevent typos and inconsistencies.

A custom component is just a standard React component, that has access to two form state objects: meta and input.

What are input and meta?


Input is an object which contains field values and methods that change form state. See the selection of most important attributes:

value: any, // any value of given form field. Its data type is based on field data type
name: string, // unique name of form field. Value will be accessible under this key in form state
onBlur: (event) => void, // function that should be triggered on field blur event
onChange: (value) => void, // function that changes value of field in formState. Should be called whenever you want to change value of field
onFocus: (event) => void, // function that should be triggered on field focus event

Every user interaction that updates field value in form state should also call input.onChange with correct value.


Meta is a object which contains meta information about field with given name. There is a lot of information about every field. Full list is here. These are commonly used meta informations

error: any, // whatever your validation function returns
pristine: bool, // true if the current value is === to the initial value, false if the values are !==.
dirty: bool, // opposite of pristine
touched: bool, //true if this field has ever gained and lost focus. false otherwise. Useful for knowing when to display error messages.
valid: bool //true if this field has no validation or submission errors. false otherwise.

You have two options how to connect your component to these objects:


First, you can use useFieldApi hook.

This hook needs name, in case of special input types which are using checked as the input value (checbkoxes, switches) you have to assign type: checkbox. The hook will return all field props, including input and meta.

import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';
const { input, isDisabled, label, helperText, description, meta } = useFieldApi(props);

Or you can import FieldProvider component from Data Driven Forms. This component needs to obtain render or Component prop.

import FieldProvider from '@data-driven-forms/react-form-renderer/dist/cjs/field-provider';
<FielProvider Component={TextField}>
// or
<FielProvider render={({input, meta, ...props}) => <TextField {...props} input={input} meta={meta}>}>

Data Driven Forms will render any component you pass to it, so you don't have to connect components to the form state in order to render it. Be aware that the component will receive metadata props such as component, validate, etc. You have to catch them before passing to other elements, otherwise it could throw DOM warnings.

const Title = ({component, name, label, ...props }) => <h1 id={name} {...props}>{label}</h1>

To be able to use your component in the schema, you need to register the component in your component mapper.

import NewComponent from './new-component'
const componentMapper = {
'new-component': NewComponent

And then use the component mapper in the form renderer component:

import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
const Form = (props) => <FormRenderer

Below, you can see an basic implementation of custom component mapper:

If you are building a new component mapper inside the Data Driven Forms repository, you can use a terminal command in the root folder to generate a basic mapper for you:

yarn generate-template

Or you can get the files directly on GitHub.