Data driven fOrms

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

0
current version
Write a schema
import React from 'react';
import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
import componentMapper from '@data-driven-forms/pf4-component-mapper/dist/cjs/component-mapper';
import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/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}
/>
Available mappers
MaterialUI
material ui logo
PatternFly 4
pf4 logo
PatternFly 3
pf4 logo
BlueprintJS
blueprintjs logo
Semantic UI
semantic ui logo
Ant Design
ant logo

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 coponents is simple as it can be - all it takes is just one hook.