Low effort, high quality forms in React.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples v0.5.1 Feb 15, 2019
packages v0.5.1 Feb 15, 2019
.gitignore Add login example Feb 3, 2019
.travis.yml Use Yarn on Travis Feb 9, 2019
README.md Add badge for bundle size Feb 12, 2019
lerna.json v0.5.1 Feb 15, 2019



Low effort, high quality forms in React.

npm bundle size code style: Prettier build status


import * as React from 'react'
import { observer } from '@thejohnfreeman/observer'
import { ViewModels } from '@thejohnfreeman/react-forms'
import {
} from '@thejohnfreeman/react-forms-material'

// Build the constructor for our view models.
// Note: fields are required (i.e. non-null) by default, just as in SQL.
const MyViewModel = ViewModels.group({
  username: ViewModels.text(),
  password: ViewModels.password().minLength(8),

class MyComponent extends React.Component {
  // Reference to the backend service.
  private readonly auth = this.props.backend.auth

  // Initializes with `username` and `password` from `props`, if present.
  private readonly viewModel = MyViewModel.construct(this.props)

  // Only called when form is valid.
  private readonly onSubmit = ({ username, password }) => {
    this.auth.logIn(username, password)

  public render() {
    // Submit button is disabled if form invalid *or* while waiting for
    // response from backend. Errors are presented as dismissable cards with
    // a red background.
    return (
      <Form viewModel={this.viewModel} onSubmit={this.onSubmit}>
        <TextField name="username" />
        <TextField name="password" />
        <Button type="submit" disabled={this.auth.isLoggingIn}>
          {this.auth.isLoggingIn ? 'Logging in...' : 'Log in'}
        <Errors errors={[this.auth.error]} />