@drieam/final-form-antd

Convenient components and hooks for using React Final Form in combination with Ant Design.

Installation

Install @drieam/final-form-antd and its peer dependencies:

$ pnpm add @drieam/final-form-antd antd final-form react-final-form

Usage

An example of how to use the different components:

import { Form } from "react-final-form";
import { FormContent, FormItem, InputField, SubmitButton } from "@drieam/final-form-antd";

const Example = () => {
  const onSubmit = useCallback(async (values) => {
    console.log(values);

    return undefined;
  }, []);

  return (
    <Form onSubmit={onSubmit}>
      {({ handleSubmit }) => (
        <FormContent handleSubmit={handleSubmit}>
          <FormItem name="name" label="Name">
            <InputField />
          </FormItem>
          <SubmitButton>Save</SubmitButton>
        </FormContent>
      )}
    </Form>
  );
}

Components and hooks

• Components
  • FormAlertError
  • FormContent
  • FormDebug
  • FormItem
  • SubmitButton
  • Inputs:
    • InputField
    • InputNumberField
    • SelectField
    • SwitchField
    • TextAreaField
• Hooks
  • useFieldProps
  • useFieldSelectProps
  • useFormItem