Material UI
Reforml provides binding to Material-UI
npm i @reforml/material-ui
// import { MaterialBaseComponents, MaterialFieldComponents } from '@reforml/material-ui'() => {const [value, setValue] = useState({})const handleChange = (newValue) => {setValue(newValue)}const fields = useMemo(() => jsyaml.load(`myText:type: textlabel: Input some valuefullWidth: truehelperText: hello worldmyOption:type: selectlabel: Input some valuefullWidth: trueoptions:- option1- option2helperText: hello worldmyCheckbox:type: checkboxlabel: check mehelperText: hello world`), [])return (<div><ReformlProvider baseComponents={MaterialBaseComponents} fieldComponents={MaterialFieldComponents}><BaseForm fields={fields} value={value} onChange={handleChange}/></ReformlProvider>value:<pre>{JSON.stringify(value, null, 2)}</pre></div>)}
Live Demo
hello world
hello world
value:
{}