Git Product home page Git Product logo

tcomb-form's Introduction

build status dependency status npm downloads

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

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

tcomb-form's People

Contributors

algm avatar colemanserious avatar eteeselink avatar gbiryukov avatar gcanti avatar jebarjonet avatar johnraz avatar jpjuni0r avatar jsor avatar karlguillotte avatar khaledh avatar kryogenic avatar kyleamathews avatar l4u avatar maksis avatar minedeljkovic avatar npmcdn-to-unpkg-bot avatar sanemat avatar serhii-vasylkiv avatar snadn avatar tombyrer avatar velveteer avatar westleyargentum avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.