You can install React Formation from npm by running npm install react-formation. If you are using common js, you can require it like this:
var Formation = require('react-formation');First, let's define the structure of your form. You can do that by using CreateForm just like how you would use React.createClass, including a render function:
var Formation = require('react-formation');
var Form = Formation.CreateForm({
render: function () {
return (<form>
<label>Name</label>
<input type="text" name="name" />
<label>Email</label>
<input type="text" name="email" />
<button>Submit</button>
</form>);
}
});
Next, add a getSchema method that returns a schema defining all the fields in the form, and link corresponding inputs with this.linkField:
var Form = Formation.CreateForm({
getSchema: function () {
return {
name: {required: true}
email: {validations: 'email'}
};
},
render: function () {
return (<form>
<label>Name</label>
<input type="text" valueLink={this.linkField('name')} />
<label>Email</label>
<input type="text" valueLink={this.linkField('email')} />
<button>Submit</button>
</form>);
}
});
Finally, add an onSuccess callback that gets called on a successful submit, and add this.submitForm as a callback to any submit buttons.
var Form = Formation.CreateForm({
getSchema: function () {
return {
name: {required: true}
email: {validations: 'email'}
};
},
onSuccess: function (data) {
console.log(data);
},
render: function () {
return (<form>
<label>Name</label>
<input type="text" valueLink={this.linkField('name')} />
<label>Email</label>
<input type="text" valueLink={this.linkField('email')} />
<button onClick={this.submitForm}>Submit</button>
</form>);
}
});
You can use your new Form class just like you would any other React element, including passing props. For example, if you wanted to render it directly into document.body:
React.render(<Form />, document.body);Check out the guide and examples: