@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

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

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

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