@data-driven-forms/pf4-component-mapper



Patternfly 4 component mapper for Data Driven Forms.

:book: For more information please visit the documentation. :book:

Table of Contents

- More information
- Installation
- React Form Renderer
- PatternFly 4 Mapper
- Usage
- Basic provided components
- ValidateOnMount
- Useful links
- Contribution
- LICENSE

$3

For more information please check the root repository or our documentation page.

$3

You need to add React Form Renderer

#### React Form Renderer

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

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

#### PatternFly 4 Mapper

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

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

$3

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

`jsx
import React from 'react';
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
import { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';

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

const Form = () => (
schema={schema}
componentMapper={componentMapper}
FormTemplate={FormTemplate}
onSubmit={console.log}
/>
)
`

$3

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

- Text input
- Text area
- Checkbox (Multiple checkboxes)
- Select (dropdown)
- Dual list select
- Field array
- Switch
- Radio buttons
- Date picker
- Time picker
- Tabs
- Slider
- Sub-form
- Plain text
- Wizard

$3

PF4 mapper provides an option to validate a field when the component is mounted. Just set validateOnMount to true.

`jsx
{
component: 'text-field',
name: 'required-field',
validate: [{type: 'required'}],
validateOnMount: true
}
``

This field will show the error immediately.

$3

- Data Driven Forms documentation
- PatternFly 4 Design documentation
- NPM
- React Form Renderer
- PatternFly 4 Mapper

$3

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

$3

Apache License 2.0