Form renderer is the core component of Data Driven Forms. It is used to generate and render forms.

import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
const App = () => (<FormRenderer
onSubmit={onSubmit}
schema={schema}
componentMapper={componentMapper}
FormTemplate={FormTemplate}
/>)
PropTypeDescription
componentMapperobjectDefines types of form field components. Field components can change the state of the form.
FormTemplateComponentComponents which defines a template of the form. This component receives two props from the renderer: formFields and schema. formFields is the content of the form. You should wrap this content into your <form> component and add form buttons.
onSubmitfuncA submit callback which receives two arguments: values and formApi.
schemaobjectA schema which defines structure of the form.
PropTypeDescriptionDefault
actionMapperobjectAction mapper allows to map props to functions.
clearOnUnmountboolWill clear values of unmounted components. You can also set this to specific component in the form schema.false
clearedValueanyValue that will be set to field with initialValue after deleting it. Useful for forms while editing.undefined
onResetfuncA reset callback. You don't need to manually clear the form values!
onCancelfuncA cancel callback, which receives values as the first argument.
debugfuncA function which will be called with every form update, i.e. ({ values }) => setValues(values), please take a look here
initialValuesobjectAn object of fields names as keys and values as their values.
schemaValidatorMapperobjectSchema validators mapper. You can control schemas of your components, validators and actions.
subscriptionobjectYou can pass your own subscription, which will be added to default settings.{ pristine: true, submitting: true, valid: true }
validatefuncA function which receives all form values and returns an object with errors.
validatorMapperobjectA mapper containing custom validators, it's automatically merged with the default one.

The root object of the schema represents the Form component. Please read more here.

schema = {
title: 'Your name', // you can extract this in formTemplate
description: 'Add your name', // you can extract this in formTemplate
fields: [{
name: 'userName',
label: 'Your name is',
component: componentTypes.TEXT_FIELD,
}]
};