easy-formx
TypeScript icon, indicating that this package has built-in type declarations

0.4.2 • Public • Published

easy-formx

中文版

a very easy react hooks form component. can replace the antd form component.

build:passed Badge npm MIT

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'
};
 
export default function Basic() {
  const { bindFormx, value, validate } = useFormx(initialValue, rules);
 
  const submit = () => {
    validate().then((data) => {
      console.log(data);
    });
  };
 
  return (
    <Formx labelWidth="100px">
      <FormxItem label="Name" {...bindFormx('name')}>
        <Input />
      </FormxItem>
      <FormxItem label="Description" {...bindFormx('description')}>
        <Input />
      </FormxItem>
      <FormxItem>
        <Button type="primary" onClick={submit}>
          submit
        </Button>
      </FormxItem>
    </Formx>
  );
}

API

useFormx

const { bindFormx, value, validate, setFieldsValue, setFieldsError, getField } = useFormx(
  initialValue
);

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 label="name" {...bindFormx('name')}>
  <input type="text" />
</FormxItem>

setFieldsValue

Set the value of fields

setFieldsValue({ name: 'name', age: 'age' });

setFieldsError

Set the error of fields

setFieldsError({ name: new Error('required') });

validate

validate all fields, return promise

validate().then();

getField

get the binding field value and error;

// basic
const [value, error] = getField('name');
 
// just update the wrapper compoennt when the binding value changed
const expensiveItem = useMemo(
  () => (
    <FormxItem label="name" {...bindFormx('name')}>
      <ExpensiveComponent />
    </FormxItem>
  ),
  getField('name')
);

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

MIT

Copyright (c) 2019-present xiemengxiong

Readme

Keywords

Package Sidebar

Install

npm i easy-formx

Weekly Downloads

2

Version

0.4.2

License

MIT

Unpacked Size

895 kB

Total Files

28

Last publish

Collaborators

  • mxie