easy-formx

a react form component to replace antd form

Usage no npm install needed!

<script type="module">
  import easyFormx from 'https://cdn.skypack.dev/easy-formx';
</script>

README

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