Automatic forms. Find it on NPM - https://www.npmjs.com/package/formatic.
Formatic is currently in use in production, but the API is likely to change significantly in its next versions.
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 form fields to edit your value.
If you're happy with the default configuration, you can use it like this:
// Get the formatic component.
import Formatic from '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(
<Formatic fields={fields} onChange={newValue => console.log(newValue)} />,
document.getElementById('my-form')
);This creates a simple form like this:
To learn more, check out the documentation.
git clone [email protected]:zapier/formatic.git
cd formatic
yarn install
yarn start
Your browser should automatically open to http://localhost:3333/demo (or other open port). Hack away on the code, and your changes should hot reload courtesy of Next.js.