OptimaJet React Form Builder Material UI components library

This library is part of the React Form Builder project.

This package contains visual components based on Material UI.
To learn how to use the package, see our documentation.

React 18 and below

If you are using React 18 or below, you need to set up a resolution of react-is package to the same version as the react you are using.
Follow this guide.

Connect to FormViewer

$3

``bash
npm install @react-form-builder/core @mui/material @emotion/react @emotion/styled @react-form-builder/components-material-ui
`

$3

`typescript jsx
import {buildForm, FormViewer} from '@react-form-builder/core'
import {view} from '@react-form-builder/components-material-ui'

const simpleForm = buildForm({errorType: 'MuiErrorWrapper'})
.component('firstName', 'MuiTextField')
.prop('placeholder', 'Enter your first name')
.prop('label', 'First Name')
.validation('required')

.component('lastName', 'MuiTextField')
.prop('placeholder', 'Enter your last name')
.prop('label', 'Last Name')
.validation('required')

.component('submit', 'MuiButton')
.prop('children', 'Submit')
.prop('color', 'primary')
.prop('variant', 'contained')
.event('onClick')
.commonAction('validate').args({failOnError: true})
.customAction('onSubmit')
.json()

export const ViewerApp = () => {
return view={view}
getForm={() => simpleForm}
actions={{
onSubmit: (e) => {
// submit the form to the backend
alert('Form data: ' + JSON.stringify(e.data))
},
}}
/>
}
`

Connect to FormBuilder

$3

`bash
npm install @react-form-builder/core @react-form-builder/designer @mui/material @emotion/react @emotion/styled @react-form-builder/components-material-ui
`

$3

`typescript jsx
import {buildForm} from '@react-form-builder/core'
import {FormBuilder} from '@react-form-builder/designer'
import {builderView} from '@react-form-builder/components-material-ui'

const simpleForm = buildForm({errorType: 'MuiErrorWrapper'})
.component('firstName', 'MuiTextField')
.prop('placeholder', 'Enter your first name')
.prop('label', 'First Name')
.validation('required')

.component('lastName', 'MuiTextField')
.prop('placeholder', 'Enter your last name')
.prop('label', 'Last Name')
.validation('required')

.component('submit', 'MuiButton')
.prop('children', 'Submit')
.prop('color', 'primary')
.prop('variant', 'contained')
.event('onClick')
.commonAction('validate').args({failOnError: true})
.customAction('onSubmit')
.json()

export const BuilderApp = () => {
return view={builderView}
getForm={() => simpleForm}
actions={{
onSubmit: (e) => {
// submit the form to the backend
alert('Form data: ' + JSON.stringify(e.data))
},
}}
/>
}
``

Resources

- Website
- Documentation
- Demo

License

This library is distributed under the MIT license.