Easy-formx NPM

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'