Automatic forms. Find it on NPM - https://www.npmjs.com/package/formatic.
Formatic is currently in use in production, but the API will likely change significantly in the not-too-distant future.
git clone [email protected]:zapier/formatic.git
cd formatic
npm install
npm start
Your browser should automatically open to http://localhost:3000/demo/index.html. Hack away on the code, the styles or the HTML in the demo directory, and the browser will automatically reload with your changes.
Note: Don't mess with the files in the live directory. All those are copied
from elsewhere.
Formatic is a configurable, pluggable forms library for React. Pass in JSON fields that define your form, along with a value to be edited, and Formatic gives you a form to edit your value.
If you're happy with the default configuration, you can use it like this:
// Get the formatic class.
var Formatic = require('formatic');
// Create an element factory.
var Form = React.createFactory(Formatic);
// Create some fields.
var fields = [
{
type: 'string',
isSingleLine: true,
key: 'firstName',
label: 'First Name'
},
{
type: 'str',
isSingleLine: true,
key: 'lastName',
label: 'Last Name'
}
];
// Render the form.
React.render(Form({
fields: fields,
onChange: function (newValue) {
console.log(newValue);
}
}), document.body);This creates a simple form like this (assuming you're using formatic.css):
The above assumes you're using a CommonJS build tool like browserify or webpack. If you use the standalone build, you can just the global `Formatic'.
The documentation is a work in progress, but there's already a lot of useful info there. Currently, it's way out of date though.