react-jsonschema-form demo

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

by matiasnu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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 CustomText = ({ value, onChange }) => {

	// Update the editor model on blur or enter keyDown
	const commitChange = e => {
		if(e.type === "blur" || e.which == 13 || e.keyCode == 13) {
			e.preventDefault();
			e.target.blur();
			onChange(e.target.value);
		}
	}

	return (
		<input
			defaultValue={value}
			onBlur={commitChange}
			onKeyDown={commitChange}
		/>
	);
}

const schema = {
  type: "object",
  properties: {
  	name: {type: "string"}
  }
};

const uiSchema = {
  name: { "ui:widget": "text" }
};

const App = class App extends React.Component {
	constructor(props) {
		super(props);
    this.handleModelChange = this.handleModelChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleClick = this.handleClick.bind(this);
		this.state = { 
    	model: { name: "test" },
      submit: {},
      useSafeRenderCompletion: false,
    };
	}
  
  handleModelChange(data) {
  	this.setState({ model: data.formData });
  }
  
  handleSubmit(data) {
  	this.setState({ submit: data.formData });
  }
 
  handleClick(e) {
  	this.setState({useSafeRenderCompletion: e.target.checked});
  }

  render() {
  	return(
      <div>
        <h3>Model</h3>
        <pre>{ JSON.stringify(this.state.model,undefined,2,2) }</pre>
        <h3>Submit</h3>
        <pre>{ JSON.stringify(this.state.submit,undefined,2,2) }</pre>
        <Form 
          safeRenderCompletion={this.state.useSafeRenderCompletion}
          widgets={{text: CustomText}}
          formData={this.state.model}
          schema={schema} 
          uiSchema={uiSchema}
          onChange={this.handleModelChange}
          onSubmit={this.handleSubmit}
          />
        <h3>Instructions</h3>   
        <p>Turn on CPU throttling in Chrome and reload the page (I'm using 50x slowdown, but you might need to go higher)</p>
        
        <ol>
          <li>Edit the name</li>
          <li>Click submit while the name input is focused.</li>
         ...