react-object-form base example

by dhfsk

HTML

<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://npmcdn.com/react-object-form/dist/ReactObjectForm.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/react-select/dist/react-select.min.css">
<div id="container">
</div>
<div class="well" id="output" />

Babel + JSX

const ReactObjectForm = window.ReactObjectForm.default;

const object = {
                title: "prof",
								name: "John", 
								age: 35, 
                email: "john@local.local", 
                male: true
               };
const config = [
	{name: "title", options:[{label: "Prof.", value: "prof"}, {label: "Dr.", value:"dr"}]}
];

const changeHandler = (changedObject) => {
	document.getElementById("output").innerHTML = JSON.stringify(changedObject);
  render(changedObject);
};
   

const render = (changed) => {ReactDOM.render(

  <ReactObjectForm 
  	object={changed ? changed : object}
    config={config}
    changeHandler={changeHandler} />,


document.getElementById('container')
);}

render();