material-ui-form-builder

This project is used by Lessence.One for build easily Material-UI forms with every built-in or 3rd party material ui component like material-ui-chip-input. We continuously increase the number of components when we need it or by pull requests.

Disclaimer

This is just a quick tentative try to create a component where we have form state management, form builder and material ui. Later we would like to replace the quick solutions with existing ones to provide as many feature as we can.

Installation

npm i --save material-ui-form-builder

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 
import Form from 'material-ui-form-builder';
 
const fields = [{ name: 'name', type: 'text' }, { name: 'limit', type: 'number' }];
const theme = createMuiTheme({
  palette: {
    primary: { main: '#8BC3D1' },
  },
});
 
ReactDOM.render(
  <div>
    <MuiThemeProvider theme={theme}>
      <Form
        fieldContainerStyle={{ backgroundColor: '#fefefe', padding: 10 }}
        onChange={(values) => console.log(values)}
        fields={fields}
        values={{ name: 'test', limit: 10 }}
        errors={{ limit: 'This field is required.' }}
      />
    </MuiThemeProvider>
  </div>,
  document.getElementById('root')
);

Form fields

text

Example: {name: 'name', type: 'text'}

Property	Type	Default	Description
default	string		The default value for the field
disabled	bool		Set true to disable the field
key	string	key	The identifier in the values object
name	string	field	The label of the field

multiLineText

Example: {name: 'name', type: 'multiLineText', rows: 5}

Property	Type	Default	Description
default	number		The default value for the field
disabled	bool		Set true to disable the field
key	string	key	The identifier in the values object
name	string	field	The label of the field
rows	number	1	Number of rows to display
rowsMax	number	2	Maximum number of rows to display
emoji	bool	false	Set true to make visible the emoji-picker

number

Example: {name: 'name', type: 'number'}

Property	Type	Default	Description
default	string		The default value for the field
disabled	bool		Set true to disable the field
key	string	key	The identifier in the values object
name	string	field	The label of the field

select

Example: {name: 'name', type: 'select', items: [{value: 1, title: 'item'}]}

Property	Type	Default	Description
default	mixed		The default value for the field
disabled	bool		Set true to disable the field
items	array		The list for select items.
key	string	key	The identifier in the values object
multiple	bool	false	Will support multiple selections, if value is trues
name	string	field	The label of the field
dialogActive	bool	false	If it is true, alert dialog will pop up every time when the value is changing
dialogContent	string		The content of the alert dialog
dialogTitle	string		The title of the alert dialog

checkbox

Example: {name: 'name', type: 'checkbox'}

Property	Type	Default	Description
default	mixed		The default value for the field
disabled	bool		Set true to disable the field
key	string	key	The identifier in the values object
name	string	field	The label of the field

chip

Example: {name: 'name', type: 'chip', items: [{value: 1, title: 'item'}]}

Property	Type	Default	Description
default	mixed		The default value for the field
key	string	key	The identifier in the values object
name	string	field	The label of the field

Properties

Name	Type	Default	Description
delayTime	number		In case when you would like to fire a delayed event about value changes.
delayTriggers	array		The field elements that fire the onDelayedChange callback when these fields are changed, delayed by the delayTime prop. Every other field has 0 delay time.
errors	object		The object to show errors by field. Example: {name: 'This field is required.'}
focusStyle	object		The style object to use to override floating label styles when focused.
handleChange	function		Callback function that is fired when one of the field's value changes. Signature: function(field: string, value: mixed) => void
onChange	function		Callback function that is fired when the form values changes. Signature: function(values: object) => void
onDelayedChange	function		Callback function that is fired delayed when the form values changes. Signature: function(values: object) => void
saveForm	function		If this property passed to the component then a save button is displayed. Callback function that is fired when click to save button. Signature: function(values: object) => void
values	object		The values for the form fields

Please open an issue if something is missing or does not work as expected.