react form management made easy
npm install zenform!logo
* Installation
* Api
* Form
* Form Props
* Form Render Props
* Field
* Field Props
* Field Render Prop
* Field Array
* Field Array Props
* Field Array Render Prop
* Field Observer
* Field Observer Props
* Form Observer
* Form Observer Props
* Acknowledgment
* License
* npm
``sh`
npm i -S zenform
* yarn
`sh`
yarn add zenform
zenform has 2 core components
and a few helper components
* FieldArray
* FieldObserver
* FormObserver
Form is top most component, all other components should be its child.
#### Form Props
* onSubmit: ({ values: Object, changeSet: Object, formActions: FormActions }) => void
*
*
*
To render the form , it takes either a function as render prop or child as a function.
This function will have form render props as arguments.
#### Form Render Props
* values: Object
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
---
Field is the actual input component, it should always be a child of Form component.
#### Field Props
* name: string
*
*
*
*
To render the field , it takes either a component (string or react component) or a function as render prop or child as a function.
This function will have field render props as arguments.
#### Field Render Prop
* input: Object
* name: string
*
* meta: Object
*
*
*
*
---
Array Field is a helper component for using multiple array input.
#### Field Array Props
* name: string
To render the field array, it takes either a function as render prop or child as a function.
This function will have field array render props as arguments.
#### Field Array Render Prop
* fields: Object
*
*
*
*
*
*
*
*
*
*
*
*
---
A FieldObserver component observes a given field and provides functions to access onChange, onBlur and onFocus on it.
This component doesn't render anything on the dom.
#### Field Observer Props
* name: string
*
*
*
where FieldObserverData is an object containing
* name: string
*
*
*
*
*
*
*
*
*
*
*
*
*
*
---
A FormObserver component observes values of the whole form and provides functions to access onChange on it.
This component doesn't render anything on the dom.
#### Form Observer Props
* onChange?: (formObserverData: FormObserverData) => void
where FormObserverData is an object containing
* values: Object
*
*
*
*
*
*
*
*
*
* Api design
* Lots of code pieces
* formik
* Lots of code pieces
MIT