micro-form
v2.0.5
Published
Low-level localized state form building library for React.
Downloads
75
Readme
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