|
| 1 | +[](https://data-driven-forms.org/) |
| 2 | + |
| 3 | +Data Driven Forms is a React library used for rendering and managing forms with a lot of provided features based on [React Final Form](https://github.com/final-form/react-final-form). |
| 4 | + |
| 5 | +:question: Why to use Data Driven Forms? :question: |
| 6 | +- All forms shared the same functionality! |
| 7 | +- Components are controlled in one place! |
| 8 | +- You can easily migrate to different sets of components! |
| 9 | +- All functionality is provided (see below!) |
| 10 | + |
| 11 | +:tada: Features :tada: |
| 12 | +- Easily readable schema, you don't need to know any HTML or JS to be able to write your own form schemas! |
| 13 | +- You can use your own components or use one of our provided mappers ([PatternFly 3](https://patternfly-react.surge.sh/patternfly-3/index.html), [PatternFly 4](https://patternfly-react.surge.sh/patternfly-4/) or [Material-UI](https://material-ui.com/)!) |
| 14 | +- Form state managing out-of-the-box (including error states!) |
| 15 | +- Fully customizable (you can use your own buttons, actions, etc.)! |
| 16 | +- Conditional fields! |
| 17 | +- Custom field validation with basic set included! |
| 18 | +- Datatype validation! |
| 19 | +- Cross-field validation! |
| 20 | +- Asynchronous validation supported! |
| 21 | +- Supporting Wizard forms! |
| 22 | +- Supporting Mozzila form schema! |
| 23 | +- ... and a lot more! |
| 24 | + |
| 25 | +:book: For more information please visit the [documentation](https://data-driven-forms.org/). :book: |
| 26 | + |
| 27 | +Used by [ManageIQ](http://manageiq.org/), Red Hat Cloud Services. |
| 28 | + |
| 29 | +**Table of Contents** |
| 30 | + |
| 31 | +- [Installation](#installation) |
| 32 | + - [React Form Renderer](#react-form-renderer) |
| 33 | + - [PatternFly 3 Mapper](#patternfly-3-mapper) |
| 34 | + - [PatternFly 4 Mapper](#patternfly-4-mapper) |
| 35 | + - [Material-UI Mapper](#material-ui-mapper) |
| 36 | +- [Usage](#usage) |
| 37 | +- [Basic provided components](#basic-provided-components) |
| 38 | +- [Documentation](#documentation) |
| 39 | +- [Useful links](#useful-links) |
| 40 | +- [Contribution](#contribution) |
| 41 | +- [LICENSE](#license) |
| 42 | + |
| 43 | +### Installation |
| 44 | + |
| 45 | +You neet to add React Form Renderer |
| 46 | + |
| 47 | +#### [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer) |
| 48 | + |
| 49 | +```console |
| 50 | +$ npm install @data-driven-forms/react-form-renderer -S |
| 51 | +``` |
| 52 | + |
| 53 | +```console |
| 54 | +$ yarn add @data-driven-forms/react-form-renderer |
| 55 | +``` |
| 56 | + |
| 57 | +Optionally you can install one of provided mappers: |
| 58 | + |
| 59 | +#### [PatternFly 3 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf3-component-mapper) |
| 60 | + |
| 61 | +```console |
| 62 | +$ npm install @data-driven-forms/pf3-component-mapper -S |
| 63 | +``` |
| 64 | + |
| 65 | +```console |
| 66 | +$ yarn add @data-driven-forms/pf3-component-mapper |
| 67 | +``` |
| 68 | + |
| 69 | +#### [PatternFly 4 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper) |
| 70 | + |
| 71 | +```console |
| 72 | +$ npm install @data-driven-forms/pf4-component-mapper -S |
| 73 | +``` |
| 74 | + |
| 75 | +```console |
| 76 | +$ yarn add @data-driven-forms/pf4-component-mapper |
| 77 | +``` |
| 78 | + |
| 79 | +#### [Material-UI Mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper) |
| 80 | + |
| 81 | +```console |
| 82 | +$ npm install @data-driven-forms/mui-component-mapper -S |
| 83 | +``` |
| 84 | + |
| 85 | +```console |
| 86 | +$ yarn add @data-driven-forms/mui-component-mapper |
| 87 | +``` |
| 88 | + |
| 89 | +### Usage |
| 90 | + |
| 91 | +For using Data Driven Forms in your component you need the renderer and a component mapper, which provides formFields components and layoutFields components. |
| 92 | + |
| 93 | +```jsx |
| 94 | +import React from 'react'; |
| 95 | +import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer'; |
| 96 | +import { formFieldsMapper, layoutMapper } from '@data-driven-forms/pf4-component-mapper'; |
| 97 | + |
| 98 | +const schema = [{ |
| 99 | + component: componentTypes.TEXT_FIELD, |
| 100 | + name: 'name', |
| 101 | + label: 'Your name' |
| 102 | +}] |
| 103 | + |
| 104 | +const Form = () => ( |
| 105 | + <FormRenderer |
| 106 | + formFieldsMapper={formFieldsMapper} |
| 107 | + layoutMapper={layoutMapper} |
| 108 | + onSubmit={console.log} |
| 109 | + /> |
| 110 | +) |
| 111 | +``` |
| 112 | + |
| 113 | +### Basic provided components |
| 114 | + |
| 115 | +Data Driven Forms supports all kinds of component, basic set is consisted of: |
| 116 | + |
| 117 | +- Text input |
| 118 | +- Text area |
| 119 | +- Checkbox (Multiple checkboxes) |
| 120 | +- Select (dropdown) |
| 121 | +- Switch |
| 122 | +- Radio buttons |
| 123 | +- Date picker |
| 124 | +- Time picker |
| 125 | +- Tabs |
| 126 | +- Sub-form |
| 127 | +- Wizard |
| 128 | + |
| 129 | +### Documentation |
| 130 | + |
| 131 | +Please use our [documentation site](https://data-driven-forms.org/). In case of any problem, you can access documentation files directly in GitHub: |
| 132 | + |
| 133 | +- [Documentation pages](packages/react-renderer-demo/src/docs-components/) |
| 134 | + - [Form renderer API](packages/react-renderer-demo/src/docs-components/renderer-api.md) |
| 135 | + - [Components API](packages/react-renderer-demo/src/docs-components/component-api.md) |
| 136 | + - [Components mapping](packages/react-renderer-demo/src/docs-components/component-mapping.md) |
| 137 | + - [Field provider](packages/react-renderer-demo/src/docs-components/field-provider.md) |
| 138 | + |
| 139 | +### Useful links |
| 140 | + |
| 141 | +- [Data Driven Forms documentation](https://data-driven-forms.org/) |
| 142 | +- [PatternFly 3 Design documentation](https://www.patternfly.org/v3/) |
| 143 | +- [PatternFly 4 Design documentation](https://www.patternfly.org/v4/) |
| 144 | +- [Material-UI documentation](https://material-ui.com/) |
| 145 | +- NPM |
| 146 | + - [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer) |
| 147 | + - [PatternFly 3 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf3-component-mapper) |
| 148 | + - [PatternFly 4 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper) |
| 149 | + - [MaterialUI Mapper](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper) |
| 150 | +- Examples of schemas (PatternFly 3) |
| 151 | + - [ManageIQ Form Components](https://github.com/ManageIQ/manageiq-ui-classic/tree/master/app/javascript/components) |
| 152 | + |
| 153 | +### Contribution |
| 154 | + |
| 155 | +We welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests! :trophy: |
| 156 | + |
| 157 | +### LICENSE |
| 158 | + |
| 159 | +Apache License 2.0 |
0 commit comments