https://github.com/zapier/formatic

:pencil2: A configurable, pluggable forms library for React used on Zapier.com.
https://github.com/zapier/formatic

forms react

Last synced: about 2 months ago
JSON representation

:pencil2: A configurable, pluggable forms library for React used on Zapier.com.

• Host: GitHub
• URL: https://github.com/zapier/formatic
• Owner: zapier
• License: mit
• Created: 2014-06-18T23:16:03.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-04-24T11:47:36.000Z (over 4 years ago)
• Last Synced: 2024-04-14T19:03:45.534Z (9 months ago)
• Topics: forms, react
• Language: JavaScript
• Homepage:
• Size: 30 MB
• Stars: 112
• Watchers: 62
• Forks: 16
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Formatic

[![travis](https://travis-ci.org/zapier/formatic.svg?branch=master)](https://travis-ci.org/zapier/formatic)

Automatic forms. Find it on NPM - [https://www.npmjs.com/package/formatic](https://www.npmjs.com/package/formatic).

## Warning!

Formatic is currently in use in production, but the API is likely to change significantly in its next versions.

## What is formatic?

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.

## Using formatic

If you're happy with the default configuration, you can use it like this:

```js

// 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(

   console.log(newValue)} />,

  document.getElementById('my-form')

);

```

This creates a simple form like this:

![simple-form](static/images/simple-form.png)

## Documentation

To learn more, check out the [documentation](http://zapier.github.io/formatic/).

## Start hacking

```

git clone [email protected]:zapier/formatic.git

cd formatic

yarn install

yarn start

```

Your browser should automatically open to [http://localhost:3333/demo](http://localhost:3333/demo) (or other open port). Hack away on the code, and your changes should hot reload courtesy of Next.js.