Frig NPM | npm.io

Frig

React Forms made easy / Developed at TouchBistro in Toronto.

Frig is:

Simple - Most form fields are 1 liners. Automatic type inference from your data keeps your form code short.
Data-bindings - Connecting any form to any data store is just 2 lines of code. 100% Redux Ready!
Layout agnostic - Frig leaves the positioning and layout of form elements completely in your control.
Powerful - Validations, nested fieldsets, image previews, time pickers and color pickers are all included out of the box!
100% React - Unlike tcomb-forms Frig is built 100% in React so it should feel very familiar in any React project.

Installation

npm: npm install --save frig frigging-bootstrap

Note: For non ES6 browser compatibility you will also need to install the Babel PolyFill.

Hello Frigging World

See live example here

// One time theme selection
// (put this in an initialization file and call it once)
import Frig from "frig"
import FriggingBootstrap from "frigging-bootstrap"
Frig.defaultTheme(FriggingBootstrap)

// ...

// Libraries needed for each component
import React from "react"
import ReactDOM from "react-dom"
import {Form, Input, Submit} from "frig"

class TheBasicsExample extends React.Component {
  displayName = "TheBasicsExample"
  state = {account: {}}

  render() {
    return (
      <Form
        data={this.state.account}
        onChange={(account) => this.setState({account})}
      >
        <div className="row">
          <Input name="email"/>
          <Input name="password"/>
          <Input name="rememberMe" type="switch"/>
          <Submit title="Sign In"/>
        </div>
      </Form>
    )
  }
}