React form light
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
Installation
$ npm install react-form-light
Usage
Refer to the original project for the full documentation
createForm(options: object, Component)
Provides the form
prop to Component
which exposes the form api
The options
object will be passed as props to the Form
component
withFormField(field: string, 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
Example
Check out the storybook
branch
const handleSubmit = { values} const handleValidation = { const name = values return name: !name ? 'A name is required' : undefined } const CustomInput = { const getTouched getError getValue setValue = form return <p> <input type='text' value= onChange= /> <br /> <b> && </b> </p> } const Values = <p>JSON</p> const CustomForm = { const form: submitForm = props console 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: '' defaultValues onSubmit: handleSubmit validate: handleValidation CustomForm
Contributing
- Create an issue
- Submit a PR with passing tests