FormForAntDesign

A set of React components for building forms with Ant Design and react-hook-form. This library helps you manage form state, validation, and submission efficiently, with minimal re-renders.

Features

• Integrates Ant Design UI with react-hook-form
• Easy form state management and validation
• Custom components: TextField, Switch, Select, MultiCheckbox, RadioGroup, and Provider

Installation

npm install form4antdesign

Compatible Versions

• React: ^18.0.0
• Ant Design: ^5.0.0
• React Hook Form: ^7.0.0

Usage

// JSX Form
...
import { useForm } from "react-hook-form";
import {
  FormProvider,
  FormInputField,
  FormPasswordField,
  FormCheckBox,
  FormSelect,
  FormSwitch,
  FormMultiCheckBox,
  FormRadioGroup,
} from "form4antdesign";
😒 Data types? schema things 👇
...
export const loginSchema = z.object({
    email: z
        .string()
        .min(1, "Email is required")
        .email("Please enter a valid email address"),
    password: z
        .string()
        .min(1, "Password is required")
        .min(8, "Password must be at least 8 characters"),
});
...
const functionName = (params) => {
  😒 Zod/Yup Schema Validates?
  const methods = useForm({
    defaultValues: {
      ...
    },
    mode: ...
    resolver: yupResolver(usecaseSchema),
  });
  const onSubmit = (data) => {
    // data handling...
  };
  return (
    <FormProvider methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
      ...
      <FormInputField name="username" placeholder="Username" />
      <FormPasswordField name="password" placeholder="Password" />
      <FormCheckBox name="agree">I agree terms</FormCheckBox>

      <FormSelect
        name="role"
        placeholder="Select role"
        options={[
          { label: "Admin", value: "admin" },
          { label: "User", value: "user" },
        ]}
      />

      <FormSwitch name="active" />
      <FormMultiCheckBox
        name="tags"
        options={[
          { label: "React", value: "react" },
          { label: "Node", value: "node" },
        ]}
      />
      <FormRadioGroup
        name="gender"
        options={[
          { label: "Male", value: "male" },
          { label: "Female", value: "female" },
        ]}
      />

      <button type="submit">Submit</button>
      ...
    </FormProvider>
  );
};

Components

• FormProvider: Wraps your form and provides react-hook-form context.
• FormTextField: Ant Design input integrated with react-hook-form.
• FormSwitch: Ant Design switch integrated with react-hook-form.
• FormSelect: Ant Design select integrated with react-hook-form.
• FormMultiCheckbox: Ant Design checkbox group integrated with react-hook-form.
• FormRadioGroup: Ant Design radio group integrated with react-hook-form.

Native HTML Components

If your project does not use Ant Design, import the NativeForm* components from form4antdesign/native. They use native HTML elements and the same react-hook-form provider pattern, so antd is not required.

import { useForm } from "react-hook-form";
import {
  FormProvider,
  NativeFormTextField,
  NativeFormSelect,
  NativeFormCheckBox,
} from "form4antdesign/native";

const methods = useForm({
  defaultValues: { role: "user", terms: false },
});

<FormProvider methods={methods} onSubmit={methods.handleSubmit(console.log)}>
  <NativeFormTextField name="username" />
  <NativeFormSelect
    name="role"
    options={[
      { label: "Admin", value: "admin" },
      { label: "User", value: "user" },
    ]}
  />
  <NativeFormCheckBox name="terms" />
  <button type="submit">Submit</button>
</FormProvider>;

Native components include NativeFormInputField, NativeFormTextField, NativeFormPasswordField, NativeFormSearchField, NativeFormOTPField, NativeFormTextArea, NativeFormSelect, NativeFormCheckBox, NativeFormSwitch, NativeFormMultiCheckBox, and NativeFormRadioGroup.

License

ISC

Author

Nguyhizthatgud "# form4antdesign" "# form4antdesign"