One of the most popular design system Material-UI is integrated to Data Driven Forms to make building React forms as fast as possible with the least amount of boilerplate. Via Data Driven Forms mui-component-mapper users can start using Material React components to write complex forms just in seconds.
Data Driven Forms is a open source React library that uses a data driven approach for building React forms. This approach is based on rendering JSON schemas as React forms with all needed functionality provided by the renderer. It includes features such as validation, conditional fields and many more. It helps web developers to write forms much quicker, simpler and to achieve a consistency across the whole application.
A mapper is a set of components integrated with Data Driven Forms API. This set allows users to write forms without any need to implement their own components, so they can immediately write fully working forms with a wide range of features (displaying errors, wizard forms, etc.) You can also check the other mappers including components from Semantic UI React, Ant Design or BlueprintJS.
- Form state management, validation, conditions and much more.
- Treeshaking: select between CommonJS, ESM or UMD packages to achieve the minimal bundle size.
- Typescript definitions for all components.
- Additional components and additional props.
- Wizard forms (see below.)
- Dual list selector.
- All inputs properly show errors.
Textarea using resolveProps to dynamically change the helper text
Single variant checkbox
Multiple variant checkbox
A switch with on text and off text
- allows to divide forms into sub groups
A form splitted to two groups
Header and overline variants
- branching paths
- submits only visited values
- allows to move options between two lists
- filtering, sorting
A dual list component lets users to move values between two lists
- allows to dynamically add form fields into forms
- i.e. registering multiple users at once
FieldArray component allows to add another fields into the form. In the GIF, you can see that this form is allowing to add more users to a users list and these users' groups can be then changed via using conditions to verify/not to verify the email.
FormTemplate component provides title, description and buttons.
Using validate is it simple to set any kind of inline validation.
npm install --save @data-driven-forms/mui-component-mapper
yarn add @data-driven-forms/mui-component-mapper
Material-UI components and icons have to be installed separately. Please follow their guide.
For more information, please reach the documentation page.
Data Driven Forms is an open source project, all community contributions are welcomed. If you encounter any issue, please let us know on GitHub issues page or open a PR. You can also follow the project on Twitter @DataDrivenForms or reach us on our Discord server.