easy-formx
a very easy react hooks form component. can replace the antd form component.
Demo
https://mengxiong10.github.io/easy-formx/example.html
Install
$ npm install easy-formx --save
Usage
import useFormx Formx FormxItem from 'easy-formx';import 'easy-formx/dist/index.css'; const rules = name: required: true message: 'required' trigger: 'blur' description: required: true message: 'required' trigger: 'blur' ; const initialValue = name: 'easy-formx' description: 'a very easy react hooks form component'; { const bindFormx value validate = ; const submit = ; ; return <Formx ="100px"> <FormxItem ="Name" > <Input /> </FormxItem> <FormxItem ="Description" > <Input /> </FormxItem> <FormxItem> <Button ="primary" => submit </Button> </FormxItem> </Formx> ;}
API
useFormx
const bindFormx value validate setFieldsValue setFieldsError getField = ;
value
current form value
bindFormx
A function that returns the appropriate props that can be spread on the FormxItem
.
After bind FormxItem
by bindFormx, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to first child comoponent.
<FormxItem ="name" > <input ="text" /></FormxItem>
setFieldsValue
Set the value of fields
;
setFieldsError
Set the error of fields
;
validate
validate all fields, return promise
;
getField
get the binding field value and error;
// basicconst value error = ; // just update the wrapper compoennt when the binding value changedconst expensiveItem = ;
Formx
Prop | Description | Type | Default |
---|---|---|---|
labelPosition | position of label | 'right' | 'left' | 'top' | 'right' |
labelWidth | width of label | string|number | - |
labelSuffix | suffix of label | string |
':' |
FormxItem
Prop | Description | Type | Default |
---|---|---|---|
label | The label text | string |
- |
labelStyle | The label style | object |
- |
trigger | prop of listen children node value change | string |
'onChange' |
valuePropName | prop of children node value | string |
'value' |
License
Copyright (c) 2019-present xiemengxiong