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 }) => voidinitialValues?: Object
* validations?: (values: Object) => void | Object | Promise<>
validateOnChange?: boolean
* validateOnBlur?: boolean
*
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: ObjecthandleSubmit: (event?: SyntheticEvent
* resetForm: () => void
* errors: Object
* touched: Object
* data: Object
* activeField: string
* isDirty: boolean
* isInvalid: boolean
* initialValues: Object
* setFieldValue: (field: string, value: any) => void
* setMultipleFieldValues: (fieldValues: Array<{field: string, value: any}>) => void
* setFieldError: (field: string, error: any) => void
* setMultipleFieldErrors: (fieldErrors: Array<{field: string, error: any}>) => void
* setFieldTouched: (field: string, isTouched: boolean) => void
* setMultipleFieldTouched: (fieldTouched: Array<{field: string, isTouched: boolean}>) => void
* setFieldData: (field: string, data: any) => void
* setMultipleFieldData: (fieldData: Array<{field: string, data: any}>) => void
* setActiveField: (field: string) => void
*
---
Field is the actual input component, it should always be a child of Form component.
#### Field Props
* name: stringformat?: (value: any) => any
* parse?: (value: any) => any
* allowNull?: boolean
* value?: any
*
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: stringvalue: any
* onChange: (Event<>) => void
onBlur: (Event<>) => void
onFocus: (Event<>) => void
* meta: Objecterror: any
* data: any
* isActive: boolean
* isTouched: boolean
*
---
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: Objectname: string,
* arrayValues: any[]
* forEach: (iterator: (name: string, index: number) => void) => void
* insert: (index: number, value: any) => void
* map: (iterator: (name: string, index: number) => any) => any[]
* move: (from: number, to: number) => void
* pop: () => void
* push: (value: any) => void
* remove: (index: number) => void
* replace: (index: number, value: any) => void
* swap: (indexA: number, indexB: number) => void
* unshift: (value: any) => number
*
---
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: stringonChange?: (fieldObserverData: FieldObserverData) => void
* onBlur?: (fieldObserverData: FieldObserverData) => void
* onFocus?: (fieldObserverData: FieldObserverData) => void
*
where FieldObserverData is an object containing
* name: stringvalue: any
* formValues: Object
* data: any
* isActive: any
* isTouched: boolean
* setFieldValue: (field: string, value: any) => void
* setMultipleFieldValues: (fieldValues: Array<{field: string, value: any}>) => void
* setFieldError: (field: string, error: any) => void
* setMultipleFieldErrors: (fieldErrors: Array<{field: string, error: any}>) => void
* setFieldTouched: (field: string, isTouched: boolean) => void
* setMultipleFieldTouched: (fieldTouched: Array<{field: string, isTouched: boolean}>) => void
* setFieldData: (field: string, data: any) => void
* setMultipleFieldData: (fieldData: Array<{field: string, data: any}>) => void
* setActiveField: (field: string) => void
*
---
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: ObjectsetFieldValue: (field: string, value: any) => void
* setMultipleFieldValues: (fieldValues: Array<{field: string, value: any}>) => void
* setFieldError: (field: string, error: any) => void
* setMultipleFieldErrors: (fieldErrors: Array<{field: string, error: any}>) => void
* setFieldTouched: (field: string, isTouched: boolean) => void
* setMultipleFieldTouched: (fieldTouched: Array<{field: string, isTouched: boolean}>) => void
* setFieldData: (field: string, data: any) => void
* setMultipleFieldData: (fieldData: Array<{field: string, data: any}>) => void
* setActiveField: (field: string) => void`
*
* Api design
* Lots of code pieces
* formik
* Lots of code pieces
MIT