Skip to content
Forms library for react
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs add visual example Jan 22, 2016
src Extra semicolon semi lint. Sep 5, 2018
test
.babelrc
.eslintrc add eslint-config-airbnb Nov 22, 2015
.gitignore
.travis.yml
CHANGELOG.md
CONTRIBUTING.md Replace npmcdn.com with unpkg.com (#358) Sep 2, 2016
GUIDE.md Add `getTcombFormOptions` to GUIDE.md. (#377) Feb 12, 2017
ISSUE_TEMPLATE.md add hint Feb 24, 2016
LICENSE
README.md docs: add Notice Mar 15, 2018
karma.conf.js Internal: fix travis Mar 15, 2018
package.json bump version Sep 5, 2018
webpack.dist.config.js add dist configuration for npmcdn Jan 21, 2016

README.md

build status dependency status npm downloads

"Simplicity is the ultimate sophistication" (Leonardo da Vinci)

Notice

tcomb-form is looking for maintainers. If you're interested in helping a great way to get started would just be to start weighing-in on GitHub issues, reviewing and testing some PRs.

Domain Driven Forms

The tcomb library provides a concise but expressive way to define domain models in JavaScript.

The tcomb-validation library builds on tcomb, providing validation functions for tcomb domain models.

This library builds on those two and realizes an old dream of mine.

Playground

This playground, while a bit outdated, gives you the general idea.

Benefits

With tcomb-form you simply call <Form type={Model} /> to generate a form based on that domain model. What does this get you?

  1. Write a lot less HTML
  2. Usability and accessibility for free (automatic labels, inline validation, etc)
  3. No need to update forms when domain model changes

Flexibility

  • tcomb-forms lets you override automatic features or add additional information to forms.
  • You often don't want to use your domain model directly for a form. You can easily create a form specific model with tcomb that captures the details of a particular feature, and then define a function that uses that model to process the main domain model.

Example

import t from 'tcomb-form'

const FormSchema = t.struct({
  name: t.String,         // a required string
  age: t.maybe(t.Number), // an optional number
  rememberMe: t.Boolean   // a boolean
})

const App = React.createClass({

  onSubmit(evt) {
    evt.preventDefault()
    const value = this.refs.form.getValue()
    if (value) {
      console.log(value)
    }
  },

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <t.form.Form ref="form" type={FormSchema} />
        <div className="form-group">
          <button type="submit" className="btn btn-primary">Save</button>
        </div>
      </form>
    )
  }

})

Output. Labels are automatically generated.

Documentation

GUIDE.md

Browser compatibility: same as React >=0.13.0

Contributions

Thanks so much to Chris Pearce for pointing me in the right direction and for supporting me in the v0.4 rewrite.

Special thanks to William Lubelski (@uiwill), without him this library would be less magic.

Thanks to Esa-Matti Suuronen for the excellent humanize() function.

Thanks to Andrey Popp for writing react-forms, great inspiration for list management.

Contributing

CONTRIBUTING.md

You can’t perform that action at this time.