A form generator for Reactjs "Alpachajs for React" Open the inspector on the demo page:
Formjs generates HTML5 forms using JSON Schema data
The library itself is very simple. All you need to do is include it in your header along with the dependencies:
<script src="react.js"></script>
<script src="underscore-min.js"></script>
<script src="build/forms.js"></script>
in your bodyFormjs is still a work in progress but should be completed before the end of February, then this section will be completed.
Form Elements
All you need to do is create a new variable called json, but this can be changed.
Here's an example of setting up formjs
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
function formjsCurrent(data){
console.log('current state');
console.log(data);
}
function formjsSubmit(data){
console.log('form submit');
console.log(data);
}
function formjsFilesOnSubmit(data){
console.log('files array on submit');
console.log(data);
}
function formjsFilesOnSelect(data){
console.log('files array on selecte');
console.log(data);
}
var values = [{
"title": "Hello world",
"bullets": [
{
"text": "hello",
"score": 5.5
},
{
"text": "world",
"score": 9.5
}
],
"are_you_awesome": true,
"chromosome_configuration": "male",
"age": 21,
"birthday": "1970-01-01",
"email": "[email protected]"
}];
var schema = [
{
"description": "Create A doo hicky",
"schema": {
"type": "object",
"properties": {
"title": {
"type": "string",
"title": "title"
},
"bullets": {
"items": {
"type": "object",
"properties": {
"text": {
"type": "string",
"description": null,
"title": "text"
},
"score": {
"type": "number",
"title": "score",
"enum": [1.5, 5.5, 9.5]
}
}
},
"type": "array",
"description": "",
"title": "Bullets"
},
"are_you_awesome": {
"type": "boolean"
},
"chromosome_configuration": {
"type": "string",
"enum": ["male", "female"]
},
"age": {
"type": "integer",
"minimum": 0,
"maximum": 150
},
"birthday": {
"type": "string",
"format": "date"
},
"email": {
"type": "string",
"format": "email",
}
}
}
}];
var forms = [];
for (var i = 0; i < schema.length; i++) {
forms.push(formjs( {data:schema[i], values: values[i], iteration:i, submitState:formjsSubmit, filesOnSubmit:formjsFilesOnSubmit, filesOnSelect:formjsFilesOnSelect, currentState:formjsCurrent} ));
}
React.renderComponent(
React.DOM.div(null, forms),
document.body
);
});
</script>
formjs is super easy to setup. You can remove the callbacks you don't need inside of the for loop. Side note: if you didn't notice the reason for the loop, it's for rendering multiple forms just by adding another one to the schema. You can remove any callback you don't need here.
There's four awesome callback functions that you can make in order to recieve data from formjs. You can see them in the index.html file, but I'll put it here too:
function formjsCurrent(data){
console.log(data);
}
function formjsSubmit(data){
console.log(data);
}
function formjsFilesOnSubmit(data){
console.log(data);
}
function formjsFilesOnSelect(data){
console.log(data);
}
The formjsCurrent
function will be called as the user changes any form fields, and formjsSubmit
will only be called once the submit button is pressed. This way, you can do whatever you want with your data. You'll recieve a json object that you can do whatever you want with. The last two are in case you want file uploads. In order to keep the library small, I don't handle uploads natively. With these functions you will get an array with each files object from your form.
Instead of listening to callbacks you can also call forms[0].getValues()
and forms[0].getFiles()
at any time. Change the array key to whichever form you want to access!
Extending Formjs is very simple. There's a great article on compiling ReactJS using the JSX compiler here. Then you can simply edit src/forms.js and output your compiled changes to the build directory. If you would like to create a new form element you only need to edit one section, and make a new component. In the generateField
component add another else if
for the new property type. Then you can reference one of the form components for an idea on what you can do. Take a look at the generic input field component:
var genericField = React.createClass({
render: function(){
return(
<div className="element inputfield">
<p dangerouslySetInnerHTML={{__html: this.props.description}} />
<label>{this.props.label}</label>
<input type = {this.props.type}
placeholder = {this.props.placeholder}
value = {this.props.value}
required = {this.props.required}
min = {this.props.minimum}
max = {this.props.maximum}
step = {this.props.step}
onChange = {this.props.change}/>
</div>
);
}
});
MIT
Free Software, Hell Yeah!
Leave a comment with any cool things you build using my library :)