current version

MaterialUI mapper provides components from MaterialUI React library.

npm install --save @data-driven-forms/mui-component-mapper


yarn add @data-driven-forms/mui-component-mapper

MaterialUI has to be installed seperately. Please follow their guidelines.

MUI 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.

MaterialUI (known just as MUI now) released a version 5 that introduces a lot of new features and some breaking changes. Data Driven Forms follows this release with our integration in mui-component-mapper. Due to inability to release new version of packages independently, we are going to introduce new changes as a feature release to not disrupt any other mappers. We deeply apologise for any issues it can introduce, but we agreed that this is the best way that won't break any of our current workflows.

Please follow official migration guide. Note: emotion packages are being installed by the mapper itself.

Use 3.16.0 and higher versions (check here.)

And that's it!

mui-component-mapper itself does not require any additional migration steps!

Only if you are using date-picker or time-picker, you have to provide LocalizationProvider (read more), the components themselves do not longer contain it.

If you encounter any issues, please let us know in our Issues section.

Please lock your mui-component-mapper version in package.json:

# package.json
- "@data-driven-forms/mui-component-mapper": "^3.15.7",
+ "@data-driven-forms/mui-component-mapper": "3.15.7",

For any future bug fixes, we will use 3.15.7 as a base version. (example: next bugfix would be 3.15.8 and these versions will be tagged as deprecated in the npm registry.)

In the near future, we will support bugfixes for Material-UI v4 mapper version, but no new features will be implemented. We are open to accept PRs by community. Also, this older version should work with the latest react-form-renderer at least until Data Driven Forms version 4 is released.