Data driven

Data Driven Forms converts JSON form definitions into fully functional React forms.

Write a schema
import React from 'react';
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
import componentMapper from '@data-driven-forms/pf4-component-mapper/component-mapper';
import FormTemplate from '@data-driven-forms/pf4-component-mapper/form-template';
const validatorMapper = {
'same-email': () => (
value, allValues
) => (
value !== allValues.email ?
'Email does not match' :
undefined
)
}
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'
}]
}
const Form = () => (
<FormRenderer
schema={schema}
componentMapper={componentMapper}
FormTemplate={FormTemplate}
onSubmit={console.log}
validatorMapper={validatorMapper}
/>
Render it

Click on the button to show values

Available features

... and many more!

Available mappers
MaterialUI
PatternFly 4
BlueprintJS
Semantic UI
Ant Design
Carbon Design System

This list represents a set of provided mappers. Each mapper brings all basic form components from its design system. You can immediately use form inputs such as text fields, selects, radios, checkboxes or wizards. However, this selection does not limit you as integrating custom components is simple as it can be - all it takes is just one hook.