@data-driven-forms/pf4-component-mapper
v3.23.4
Published
Patternfly 4 React component mapper for Data Driven Forms.
Downloads
3,604
Readme
Patternfly 4 component mapper for Data Driven Forms.
:book: For more information please visit the documentation. :book:
Table of Contents
- More information
- Installation
- Usage
- Basic provided components
- ValidateOnMount
- Useful links
- Contribution
- LICENSE
More information
For more information please check the root repository or our documentation page.
Installation
You need to add React Form Renderer
React Form Renderer
$ npm install @data-driven-forms/react-form-renderer -S
$ yarn add @data-driven-forms/react-form-renderer
PatternFly 4 Mapper
$ npm install @data-driven-forms/pf4-component-mapper -S
$ yarn add @data-driven-forms/pf4-component-mapper
Usage
For using Data Driven Forms in your component you need the renderer and a component mapper, which provides formFields components and layoutFields components.
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 = () => (
<FormRenderer
schema={schema}
componentMapper={componentMapper}
FormTemplate={FormTemplate}
onSubmit={console.log}
/>
)
Basic provided components
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
ValidateOnMount
PF4 mapper provides an option to validate a field when the component is mounted. Just set validateOnMount
to true
.
{
component: 'text-field',
name: 'required-field',
validate: [{type: 'required'}],
validateOnMount: true
}
This field will show the error immediately.
Useful links
Contribution
We welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests! :trophy:
LICENSE
Apache License 2.0