Data Driven Forms is a React library used for rendering and managing forms with a lot of provided features based on React Final Form.
❓ Why to use Data Driven Forms? ❓
- All forms shared the same functionality!
- Components are controlled in one place!
- You can easily migrate to different sets of components!
- All functionality is provided (see below!)
🎉 Features 🎉
- Easily readable schema, you don't need to know any HTML or JS to be able to write your own form schemas!
- You can use your own components or use one of our provided mappers: PatternFly 4, Material-UI, Ant Design! and more, see below!)
- Form state manager out-of-the-box (including error states!)
- Fully customizable (you can use your own buttons, actions, etc.)!
- Conditional fields!
- Custom field validation with basic set included!
- Datatype validation!
- Cross-field validation!
- Asynchronous validation supported!
- Supporting Wizard forms!
- Supporting Final Form Field Array!
- ... and a lot more!
📖 For more information please visit the documentation. 📖
Table of Contents
$ npm install @data-driven-forms/react-form-renderer -S$ yarn add @data-driven-forms/react-form-renderer$ npm install @data-driven-forms/mui-component-mapper -S$ yarn add @data-driven-forms/mui-component-mapper$ npm install @data-driven-forms/pf4-component-mapper -S$ yarn add @data-driven-forms/pf4-component-mapper$ npm install @data-driven-forms/blueprint-component-mapper -S$ yarn add @data-driven-forms/blueprint-component-mapper$ npm install @data-driven-forms/suir-component-mapper -S$ yarn add @data-driven-forms/suir-component-mapper$ npm install @data-driven-forms/ant-component-mapper -S$ yarn add @data-driven-forms/ant-component-mapper$ npm install @data-driven-forms/carbon-component-mapper -S$ yarn add @data-driven-forms/carbon-component-mapperComponent libraries in mappers are external dependencies. Make sure to install them and their styles in your bundles.
Provided mappers of Data Driven Forms support contains following set of components:
- 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
Any other components can be added to mapper and renderer with the form renderer. Existing components can be also overriden.
In order to Data Driven Forms in your component you need the renderer and a component mapper, which provides component mapper and form template.
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}
/>
)You can also use custom mapper.
import React from 'react';
import { FormRenderer, componentTypes, useFieldApi } from '@data-driven-forms/react-form-renderer';
const TextField = props => {
const {label, input, meta, ...rest} = useFieldApi(props)
return (
<div>
<label htmlForm={input.name}>{label}</label>
<input {...input} {...rest} id={input.name}/>
{meta.error && <p>{meta.error}</p>}
</div>
)
}
const componentMapper = {
[componentTypes.TEXT_FIELD]: TextField,
'custom-type': TextField
}
const schema = {
fields: [{
component: componentTypes.TEXT_FIELD,
name: 'name',
label: 'Your name'
type: 'search',
}]
}For more information, please check this page.
Mappers can be also generated by using yarn generate-template command.
Please use our documentation site. In case of any problem, you can access documentation files directly in GitHub.
Data Driven Forms is a monorepo that uses Lerna and yarn workspaces, so you can use all its commands as well.
-
○ NodeJS 16
-
○ Unix like OS (MacOS, Linux)
We do not support developing on Windows at this moment. However, we would welcome any PR to change this.
yarn installyarn buildAll packages are linked together by default, so if you run a yarn build in a package, all other packages are updated to the latest version of that package. A package has to be built first before it is used in other package.
Each package has a small playground package/demo, where you can test your changes.
cd packages/pf3-component-mapper
yarn startThe documentation is a server-side rendered React application based on NextJS framework.
cd packages/react-renderer-demo
yarn devyarn lerna clean
rm -rf node_modulesTo clean built files use following command: (This script is also ran automatically before each build.)
yarn clean-buildTests can be ran from core folder or from specific package.
yarn test
yarn test --watchAll packages/pf4-component-mapper
# or
cd packages/pf4-component-mapper
yarn testPlease follow following checklist if you are going to open a PR. It will help you make the PR finished.
Run yarn build in root folder to build all packages. You can run this command only in package you changed. All packages are linked by default, you have to build them first.
Run yarn lint in root folder to check if the code is correctly formatted. You can use yarn lint --fix to automatically correct issues.
All new code should be properly tested. Run yarn test in root folder to test all files. Check codecoverage report to see uncovered lines of code. We are using Jest and React Testing Library.
If you introduce a new feature, you should document this change in our documentation. The documentation is located in react-renderer-demo package and it is a web application based on NextJS. We do not write tests for the documentation.
yarn dev starts a local version of the documentation.
yarn build prepares files for deployment.
yarn serve emulates the web application running in local emulator.
A correct commit message is important, because we are using semantic release to automatically releease new versions. These messages are also used in our release notes, so other users can see what is being changed.
My change introduces a new feature
Prefix your commit message with feat and specify the package that is being changed. An example: feat(pf4): a new dual list integration. If you change multiple packages, you can use feat(common): ... or feat(all): ....
My change fixes a bug or technical debt
Prefix your commit message with fix. Otherwise, the same rules apply. An example: fix(pf4): fixed missed proptype in select.
My change does not change any released package
If your change does not change any of the released packages, you can simple just descibe the change, an example: Fix button on documenation example page. This also applies for any change in the documentation repo.
My change introduces a breaking change
We are trying to avoid breaking changes. Please, open an issue and discuss the issue with us, we will try to come up with alternative options.
- Data Driven Forms documentation
- PatternFly 4 Design documentation
- Material-UI documentation
- Ant Design documentation
- Semantic UI React
- BlueprintJS
- IBM Carbon
- NPM
We welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests! 🏆
Apache License 2.0