react-jsonschema-form demo
https://github.com/mozilla-services/react-jsonschema-form
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 step1schema = {
title: "Step 1",
type: "object",
required: ["name"],
properties: {
name: {type: "string", minLength: 3},
}
};
const step2schema = {
title: "Step 2",
type: "object",
required: ["age"],
properties: {
age: {type: "integer"}
}
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {step: 1, formData: {}};
}
onSubmit = ({formData}) => {
if (this.state.step === 1) {
this.setState({
step: 2,
formData: {
...this.state.formData,
...formData
},
});
} else {
alert("You submitted " + JSON.stringify(formData, null, 2));
}
}
render() {
return (
<Form
schema={this.state.step === 1 ? step1schema : step2schema}
onSubmit={this.onSubmit}
formData={this.state.formData}/>
);
}
}
React.render(<App/>, document.getElementById("main"));