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

You neet to add 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:

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

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

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

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

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

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

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

importReactfrom'react';importFormRenderer,{componentTypes}from'@data-driven-forms/react-form-renderer';import{formFieldsMapper,layoutMapper}from'@data-driven-forms/pf4-component-mapper';constschema={fields: [{component: componentTypes.TEXT_FIELD,name: 'name',label: 'Your name'}]}constForm=()=>(<FormRendererschema={schema}formFieldsMapper={formFieldsMapper}layoutMapper={layoutMapper}onSubmit={console.log}/>)

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

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

• 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

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

Apache License 2.0