easy-formx

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