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'
};

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