Carbon component mapper for Data Driven Forms.
Table of Contents
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
Carbon Mapper
$ npm install @data-driven-forms/carbon-component-mapper -S
$ yarn add @data-driven-forms/carbon-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/carbon-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
Useful links
- Data Driven Forms documentation
- React Form Renderer
- Carbon Mapper NPM
- Carbon Design System documentation
- Carbon React Compononents storybook
Contribution
We welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests!
LICENSE
Apache License 2.0