reactjs-jsonschemaform demo

ReactJS custom component registration

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>

Babel + JSX

const Form = JSONSchemaForm.default
const MyCustomWidget = (props) => {
  return (
    <input type="text"
      className="custom"
      value="Nic"
      onChange={(event) => props.onChange(event.target.value)} />
  )
}

const schema = {
  title: "react-jsonschema-form demo",
  type: "object",
  required: ["name"],
  properties: {
  	name: {type: "string", minLength: 3},
    description: {type: "string"}
  }
}

const widgets = {
  myCustomWidget: MyCustomWidget
}

const uiSchema = {
  "ui:widget": "myCustomWidget"
}

React.render((
  <Form
    noHtml5Validate={true}
    schema={schema}
    uiSchema={uiSchema}
    widgets={widgets} />
), document.getElementById("main"))