Skip to content

Commit 03e0009

Browse files
authored
Merge pull request #112 from rvsia/readme
Add readme for core repo
2 parents 5975ae1 + ca1b9cb commit 03e0009

File tree

3 files changed

+159
-1
lines changed

3 files changed

+159
-1
lines changed

README.md

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
[![Data Driven Form logo](images/logo.png)](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

REDME.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

images/logo.png

13.5 KB
Loading

0 commit comments

Comments
 (0)