Custom components
These are user defined components used to display custom components in the form.
Steps
- Create a new component. For example:
BarChart. - New component can declare the following properties to read all field values and its internal states. To read the value of the field, use
field.value
| Name | Description |
|---|---|
| field | It contains readonly field related properties. |
| form | It contains readonly properties of all the form fields. The data is divided into different groups(grouped fields). For simple forms, the group key name is default |
-
Specify
displayTypeas template -
Specify custom component name in schema through
config->templateproperty
{
"name": "compare_chart",
"meta": {
"config": {
"template": "barChart"
},
"displayType": "template"
}
}- Pass the custom component and its name as an input property as following
import React from "react";
import MuiForms from "mui-forms";
import BarChart from "<location>";
function MyForm() {
return (
<MuiForms
...
components={{
"barChart": BarChart
}}
...
/>
)
}Basic example
An interactive custom score chart form
Schema
{}
fields]
:
[[
…
][
…
][
…
]Usage
import MuiForms from "mui-forms";
import schema from "<schema_location.json>";
import Bar from "<my_bar_chart_location>";
<MuiForms
name="myForm"
components={{
piechartbarchart: Bar
}}
schema={schema}
onSubmit={(formData) => {
// handle form submission
}}
/>;