micro-form v2.0.5

micro-form

Hyper-minimal form building library for React. Easily hydrate values, validate fields, and handle error states. No magic. <3kb.

Usage

import myApi from './myApi.js'
import { createForm, createFactory, createField } from 'micro-form'

const Form = createForm(({ state, valid, validateForm, getPayload, resetForm }) => (
  <form onSubmit={e => {
    e.preventDefault()

    if (validateForm()) {
      myApi(getPayload()).then(() => {
        resetForm()
      })
    }
  }}>
    {children}
  </form>
))

const Input = createFactory(({ name, value, valid, validateField, updateField, ...userDefinedProps }) => (
  <div>
    <label htmlFor={name}>{userDefinedProps.label}</label>
    <input name={name} value={value} type={userDefinedProps.type} onChange={e => {
      updateField(e.target.value)
      validate()
    }} />
  </div>
))

const Email = createField({
  name: 'email',
  initialValue: ''
})(({ name, value, valid, updateField, validateField, ...userDefinedProps }) => (
  <div>
    <label htmlFor={name}>Email</label>
    <input name={name} value={value} type='email' onChange={e => {
      updateField(e.target.value)
      validate()
    }} />
  </div>
))

const App = props => (
  <Form>
    <Input
      name='name'
      type='text'
      initialValue='Eric Bailey'
      validate={val => val !== ''}
      label='Name' />
    <Email />
  </Form>
)

Dependencies

• microstate - Co-located & composable state management for React by @estrattonbailey.

MIT License