22[ ![ CircleCI] ( https://circleci.com/gh/data-driven-forms/react-forms/tree/master.svg?style=svg )] ( https://circleci.com/gh/data-driven-forms/react-forms/tree/master )
33[ ![ npm version] ( https://badge.fury.io/js/%40data-driven-forms%2Freact-form-renderer.svg )] ( https://badge.fury.io/js/%40data-driven-forms%2Freact-form-renderer )
44
5- [ ![ Data Driven Form logo] ( images/logo.png )] ( https://data-driven-forms.org/ )
5+ [ ![ Data Driven Form logo] ( https://raw.githubusercontent.com/data-driven-forms/react-forms/master/ images/logo.png)] ( https://data-driven-forms.org/ )
66
77Data 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 ) .
88
@@ -33,10 +33,13 @@ Data Driven Forms is a React library used for rendering and managing forms with
3333
3434- [ Installation] ( #installation )
3535 - [ React Form Renderer] ( #react-form-renderer )
36+ - [ Material-UI Mapper] ( #material-ui-mapper )
3637 - [ PatternFly 3 Mapper] ( #patternfly-3-mapper )
3738 - [ PatternFly 4 Mapper] ( #patternfly-4-mapper )
38- - [ Material-UI Mapper] ( #material-ui-mapper )
39+ - [ BlueprintJS Mapper] ( #blueprintjs-mapper )
40+ - [ Semantic UI Mapper] ( #semantic-ui-mapper )
3941- [ Usage] ( #usage )
42+ - [ Custom mapper] ( #custom-mapper )
4043- [ Basic provided components] ( #basic-provided-components )
4144- [ Documentation] ( #documentation )
4245- [ Useful links] ( #useful-links )
@@ -64,7 +67,7 @@ $ yarn add @data-driven-forms/react-form-renderer
6467Optionally you can install one of provided mappers:
6568
6669
67- #### [ Material-UI Mapper] ( https://www.npmjs.com/package/@ data-driven-forms/mui-component-mapper )
70+ #### [ Material-UI Mapper] ( https://data-driven-forms.org/mappers /mui-component-mapper )
6871
6972``` console
7073$ npm install @data-driven-forms/mui-component-mapper -S
@@ -74,7 +77,7 @@ $ npm install @data-driven-forms/mui-component-mapper -S
7477$ yarn add @data-driven-forms/mui-component-mapper
7578```
7679
77- #### [ PatternFly 3 Mapper] ( https://www.npmjs.com/package/@ data-driven-forms/pf3-component-mapper )
80+ #### [ PatternFly 3 Mapper] ( https://data-driven-forms.org/mappers /pf3-component-mapper )
7881
7982``` console
8083$ npm install @data-driven-forms/pf3-component-mapper -S
@@ -84,7 +87,7 @@ $ npm install @data-driven-forms/pf3-component-mapper -S
8487$ yarn add @data-driven-forms/pf3-component-mapper
8588```
8689
87- #### [ PatternFly 4 Mapper] ( https://www.npmjs.com/package/@ data-driven-forms/pf4-component-mapper )
90+ #### [ PatternFly 4 Mapper] ( https://data-driven-forms.org/mappers /pf4-component-mapper )
8891
8992``` console
9093$ npm install @data-driven-forms/pf4-component-mapper -S
@@ -94,11 +97,31 @@ $ npm install @data-driven-forms/pf4-component-mapper -S
9497$ yarn add @data-driven-forms/pf4-component-mapper
9598```
9699
100+ #### [ BlueprintJS Mapper] ( https://data-driven-forms.org/mappers/blueprint-component-mapper )
101+
102+ ``` console
103+ $ npm install @data-driven-forms/blueprint-component-mapper -S
104+ ```
105+
106+ ``` console
107+ $ yarn add @data-driven-forms/blueprint-component-mapper
108+ ```
109+
110+ #### [ Semantic UI Mapper] ( https://data-driven-forms.org/mappers/suir-component-mapper )
111+
112+ ``` console
113+ $ npm install @data-driven-forms/suir-component-mapper -S
114+ ```
115+
116+ ``` console
117+ $ yarn add @data-driven-forms/suir-component-mapper
118+ ```
119+
97120Component libraries in mappers are external dependencies. Make sure to install them in your bundles.
98121
99122### Usage
100123
101- In order to Data Driven Forms in your component you need the renderer and a component mapper, which provides component mapper and form template
124+ In order to Data Driven Forms in your component you need the renderer and a component mapper, which provides component mapper and form template.
102125
103126``` jsx
104127import React from ' react'
@@ -123,6 +146,44 @@ const Form = () => (
123146)
124147```
125148
149+ #### Custom mapper
150+
151+ You can also use custom mapper.
152+
153+ ``` jsx
154+ import React from ' react'
155+ import FormRenderer , { componentTypes , useFieldApi } from ' @data-driven-forms/react-form-renderer'
156+
157+ const TextField = props => {
158+ const {label , input , meta , ... rest } = useFieldApi (props)
159+ return (
160+ < div>
161+ < label htmlForm= {input .name }> {label}< / label>
162+ < input {... input} {... rest} id= {input .name }/ >
163+ {meta .error && < p> {meta .error }< / p> }
164+ < / div>
165+ )
166+ }
167+
168+ const componentMapper = {
169+ [componentTypes .TEXT_FIELD ]: TextField,
170+ ' custom-type' : TextField
171+ }
172+
173+ const schema = {
174+ fields: [{
175+ component: componentTypes .TEXT_FIELD ,
176+ name: ' name'
177+ label: ' Your name'
178+ type: ' search'
179+ }]
180+ }
181+ ```
182+
183+ For more information, please check [ this page] ( https://data-driven-forms.org/renderer/component-mapping ) .
184+
185+ Mappers can be also generated by using ` yarn generate-template ` [ command] ( https://data-driven-forms.org/renderer/development-setup#generatingamappertemplate ) .
186+
126187### Basic provided components
127188
128189Data Driven Forms supports all kinds of component, basic set is consisted of:
@@ -131,11 +192,14 @@ Data Driven Forms supports all kinds of component, basic set is consisted of:
131192- Text area
132193- Checkbox (Multiple checkboxes)
133194- Select (dropdown)
195+ - Dual list select
196+ - Field array
134197- Switch
135198- Radio buttons
136199- Date picker
137200- Time picker
138201- Tabs
202+ - Slider
139203- Sub-form
140204- Wizard
141205
0 commit comments