react-jsonschema-form demo

https://github.com/mozilla-services/react-jsonschema-form

by Nicolas Perriault

HTML

<script src="https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div id="main"></div>
</div>

CSS

.myfield .myfield {
  float: left;
  width: 50%;
  padding: 0 1em;
}

fieldset .myfield:nth-child(even) {
  clear: left;
}

form > p {
  padding: 1em;
}

Babel + JSX

const Form = JSONSchemaForm.default;
const schema = {
  title: "react-jsonschema-form demo",
  type: "object",
  required: ["name"],
  properties: {
  	name: {type: "string", minLength: 3},
    age: {type: "number"},
    thing: {type: "string"},
    other: {type: "string"},
  }
};
const uiSchema = {
};

function Tpl(props) {
  const {id, label, required, children} = props;
  return (
    <div className="myfield">
      <label htmlFor={id}>{label}{required ? "*" : null}</label>
      {children}
    </div>
  );
}

React.render(
	<Form className="row" schema={schema} uiSchema={uiSchema} FieldTemplate={Tpl} liveValidate/>
, document.getElementById("main"));