Low effort, high quality forms in React.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
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
LICENSE
README.md Add badge for bundle size Feb 12, 2019
lerna.json v0.5.1 Feb 15, 2019
package.json

README.md

react-forms

Low effort, high quality forms in React.

npm bundle size code style: Prettier build status

Usage

import * as React from 'react'
import { observer } from '@thejohnfreeman/observer'
import { ViewModels } from '@thejohnfreeman/react-forms'
import {
  Button,
  Errors,
  Form,
  TextField
} 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),
})

@observer
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'}
        </Button>
        <Errors errors={[this.auth.error]} />
      </Form>
    )
  }
}