A lightweight version of react-form with a slightly different API
- Supports a
component
prop instead of using children-as-functions - Adds
createForm
andwithFormField
HOCs which decorates the component with the form api - Drops
FormError
,FormInput
and standard Form Components - Tests
$ npm install react-form-light
Refer to the original project for the full documentation
Provides the form
prop to Component
which exposes the form api
The options
object will be passed as props to the Form
component
Provides the form
prop to Component
which exposes the form api
The field
object is used to bind the form api to a specific field
Check out the storybook
branch
import React from 'react'
import { createForm, FormField } from 'react-form-light'
const handleSubmit = values => {
action('Submitted values')(values)
}
const handleValidation = values => {
const { name } = values
return {
name: !name ? 'A name is required' : undefined
}
}
const CustomInput = ({ form }) => {
const { getTouched, getError, getValue, setValue } = form
return (
<p>
<input
type='text'
value={getValue()}
onChange={e => setValue(e.target.value)}
/>
<br />
<b>{getTouched() && getError()}</b>
</p>
)
}
const Values = ({ form: { getValue } }) => (
<p>{JSON.stringify(getValue())}</p>
)
const CustomForm = props => {
const { form: { submitForm } } = props
console.log(props)
return (
<form onSubmit={submitForm}>
<p>Name</p>
<FormField field='name' component={CustomInput} />
<FormField component={Values} />
<button type='submit'>Submit me</button>
</form>
)
}
const defaultValues = {
name: ''
}
export default createForm({
defaultValues,
onSubmit: handleSubmit,
validate: handleValidation
}, CustomForm)
- Create an issue
- Submit a PR with passing tests