react-jsonschema-form demo

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

by gavinfoley

HTML

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

Babel + JSX

const Form = JSONSchemaForm.default;
const schema = {
  title: "Demo for countries",
  type: "object",
  properties: {
    country: {
      type: "string",
      title: "Country",
      enum: ["CANADA", "USA", "MEXICO"]
    }
  },
  dependencies: {
    country: {
      oneOf: [
        {
          properties: {
            country: {
              enum: ["CANADA"]
            },
            val: {
              type: "string",
              title: "Province",
              enum: ["ALBERTA", "BRITISH COLUMBIA", "MANITOBA"]
            }
          }
        },
        {
          properties: {
            country: {
              enum: ["USA"]
            },
            val: {
              type: "string",
              title: "State",
              enum: ["ALABAMA", "OREGON", "ARKANSAS"]
            }
          }
        },
        {
          properties: {
            country: {
              enum: ["MEXICO"]
            },
            val: {
              type: "string",
              title: "State",
              enum: ["JALISCO", "BAJA CALIFORNIA", "CHIAPAS"]
            }
          }
        }
      ]
    }
  }
};
const uiSchema = {
  description: {
    "ui:widget": "textarea"
  }
};

ReactDOM.render(<Form schema={schema} uiSchema={uiSchema}/>, 
             document.getElementById("main"));