Data Driven Forms is a React library used for rendering and managing forms with a lot of provided features based on React Final Form.

❓ Why to use Data Driven Forms? ❓

• All forms shared the same functionality!
• Components are controlled in one place!
• You can easily migrate to different sets of components!
• All functionality is provided (see below!)

🎉 Features 🎉

• Easily readable schema, you don't need to know any HTML or JS to be able to write your own form schemas!
• You can use your own components or use one of our provided mappers (PatternFly 3, PatternFly 4 or Material-UI!)
• Form state managing out-of-the-box (including error states!)
• Fully customizable (you can use your own buttons, actions, etc.)!
• Conditional fields!
• Custom field validation with basic set included!
• Datatype validation!
• Cross-field validation!
• Asynchronous validation supported!
• Supporting Wizard forms!
• Supporting Mozzila form schema!
• ... and a lot more!

📖 For more information please visit the documentation. 📖

Used by ManageIQ, Red Hat Cloud Services.

Table of Contents

• Installation
  • React Form Renderer
  • PatternFly 3 Mapper
  • PatternFly 4 Mapper
  • Material-UI Mapper
• Usage
• Basic provided components
• Documentation
• Useful links
• Contribution
• LICENSE

Installation

You neet to add React Form Renderer

React Form Renderer

$ npm install @data-driven-forms/react-form-renderer -S

$ yarn add @data-driven-forms/react-form-renderer

Optionally you can install one of provided mappers:

PatternFly 3 Mapper

$ npm install @data-driven-forms/pf3-component-mapper -S

$ yarn add @data-driven-forms/pf3-component-mapper

PatternFly 4 Mapper

$ npm install @data-driven-forms/pf4-component-mapper -S

$ yarn add @data-driven-forms/pf4-component-mapper

Material-UI Mapper

$ npm install @data-driven-forms/mui-component-mapper -S

$ yarn add @data-driven-forms/mui-component-mapper

Usage

For using Data Driven Forms in your component you need the renderer and a component mapper, which provides formFields components and layoutFields components.

import React from 'react';
import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
import { formFieldsMapper, layoutMapper } from '@data-driven-forms/pf4-component-mapper';

const schema = {
  fields: [{
    component: componentTypes.TEXT_FIELD,
    name: 'name',
    label: 'Your name'
  }]
}

const Form = () => (
  <FormRenderer
    schema={schema}
    formFieldsMapper={formFieldsMapper}
    layoutMapper={layoutMapper}
    onSubmit={console.log}
  />
)

Basic provided components

Data Driven Forms supports all kinds of component, basic set is consisted of:

• Text input
• Text area
• Checkbox (Multiple checkboxes)
• Select (dropdown)
• Switch
• Radio buttons
• Date picker
• Time picker
• Tabs
• Sub-form
• Wizard

Documentation

Please use our documentation site. In case of any problem, you can access documentation files directly in GitHub:

• Documentation pages
  • Form renderer API
  • Components API
  • Components mapping
  • Field provider

Useful links

• Data Driven Forms documentation
• PatternFly 3 Design documentation
• PatternFly 4 Design documentation
• Material-UI documentation
• NPM
  • React Form Renderer
  • PatternFly 3 Mapper
  • PatternFly 4 Mapper
  • MaterialUI Mapper
• Examples of schemas (PatternFly 3)
  • ManageIQ Form Components

Contribution

We welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests! 🏆

LICENSE

Apache License 2.0