Better Form Programing in React

I have worked on forms for months. During this time, I found it is so complex to finish a form in my project. My team is facing a big system, in which have several forms whose fields logic is very complicated. The form development experience is so bad, makes me thinking more about how to develop form more understandfully.

Finally, I create a library which help react developers to manage form development more easy.

Model

A form will operate some state to store user's selected/input values. However, to use them in UI rendering is not as though. I provide a Model to bind form state.

import { Model, Meta, Enum } from 'tyshemo'

class Name extends Meta {
  static default = 'lucy'
  static type = String
  static required = true
  static hidden = function() {
    return this.sex === 'M'
  }
  static label = 'Name'
}

class Sex extends Meta {
  static default = 'F'
  static type = new Enum(['F', 'M'])
  static label = 'Sex'
}

class Person extends Model {
  static name = Name
  static age = Age

  attrs() {
    return ['label']
  }
}

In Model, you should define properties of form. So that, you can manage your form state more formulatable.

connect

Choose a way to connect a component by react-tyshemo, so that you can arrange your UI.

import { useLocal } from 'react-tyshemo'

export default function MyComponent() {
  const person = useLocal(function() {
    return Person
  })

  // ...
}

Field

To make form works, you may render a form in your component. However, wait for a minute. Each field of form may have its own UX, how to make them work tegother?

In fact, it is easy to find that, a field will need some common information:

• value: the value to render on screen
• logic: required, readonly, disabled, hidden
• extra: label, placeholder
• handle: the function to update value

As metioned, we can make it easy to implement.

import { useLocal } from 'react-tyshemo'
import { Field } from 'react-tyshemo-form'

export default function MyComponent() {
  const person = useLocal(function() {
    return Person
  })

  return (
    <form>
      <Field model={person} key="name" render={(view) => {
        return (
          <div>
            <label>{view.label} {view.required ? '*' : ''}</label>
            <input 
              type="text" 
              value={view.value} 
              onChange={e => view.onChange(e.target.value)} 
              disabled={view.disabled} 
              readonly={view.readonly} 
              hidden={view.hidden} 
            />
          </div>
        )
      }} />
      <Field model={person} key="age" render={...} />
    </form>
  )
}

We provide a Field component, which use the model instance to render with a view parameter which contains all informations. So that you can operate your form state very clearly.

This is what you may need to operate form in react. A Model, a Field component and a connect function.