
Building React forms using DDF – MaterialUI live demo included - rvsia
https://medium.com/javascript-in-plain-english/data-driven-form-building-in-react-30768b49e625
======
rvsia
This article presents a simple way how to build a complex React form using
components from multiple React design systems (Material, Semantic, Blueprint,
...)

The described open source library [https://github.com/data-driven-forms/react-
forms](https://github.com/data-driven-forms/react-forms) allows to:

\- show/hide conditional fields (fields that depends on values of different
inputs) \- (async) validation \- complex wizard forms (branching, predicting
steps in the nav) \- form management based on React Final Form \- many
components provided by the library: select, wizard, checkbox, radio, ... in
multiple design systems

All these feature are used by writing a simple JSON schema like this:

const schema = { fields: [{ component: componentTypes.TEXT_FIELD, name:
'name', label: 'Your name', isRequired: true, validate: [{ type:
validatorTypes.REQUIRED }] }, { component: componentTypes.TEXT_FIELD, name:
'email', label: 'Email', isRequired: true, validate: [ { type:
validatorTypes.REQUIRED }, { type: validatorTypes.PATTERN, pattern:
'[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$', message: 'Not valid email' } ] },{
component: componentTypes.TEXT_FIELD, name: 'confirm-email', label: 'Confirm
email', type: 'email', isRequired: true, validate: [{ type: 'same-email' }]
},{ component: componentTypes.CHECKBOX, name: 'newsletters', label: 'I want to
receive newsletter' }] }

You can check a live demo on
stackblitz:[https://stackblitz.com/edit/wttpqn](https://stackblitz.com/edit/wttpqn)

