React-Hook-Form-Mantine

React-Hook-Form-Mantine is a library that simplifies the integration of Mantine components with React Hook Form. By adding a "name" prop to Mantine components, the library seamlessly connects them to the corresponding form field.

Getting Started

npm install @trendcapital/react-hook-form-mantine

Basic Usage

import { useForm } from "react-hook-form";
import { TextInput, NumberInput } from "@trendcapital/react-hook-form-mantine";

function MyForm() {
  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <FormProvider {...form}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <TextInput name="username" label="Username" />
        <NumberInput name="age" label="Age" />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

Optionally, without a FormProvider, you may pass the control prop:

import { useForm } from "react-hook-form";
import { TextInput, NumberInput } from "@trendcapital/react-hook-form-mantine";

function MyForm() {
  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextInput name="username" control={control} label="Username" />
      <NumberInput name="age" control={control} label="Age" />
      <button type="submit">Submit</button>
    </form>
  );
}

Input Name Assertion

import { useForm } from "react-hook-form";
import { TextInput, NumberInput } from "@trendcapital/react-hook-form-mantine";

const schema = z.object({
  username: z.string().min(2).max(100),
  age: z.number().min(0).max(120),
});

type TFormInputs = z.infer<typeof schema>;

function MyForm() {
  const { control, handleSubmit } = useForm<TFormInputs>({
    resolver: zodResolver(schema),
  });

  const onSubmit: SubmitHandler<TFormInputs> = (data) => {
    console.log(data);
  };

  return (
    <FormProvider {...form}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <TextInput<TFormInputs> name="username" label="Username" />
        <NumberInput<TFormInputs> name="age" label="Age" />

        {/* This one will show an error on the name prop */}
        <TextInput<TFormInputs> name="email" label="Email" />

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

InputBase Component Polymorphism

import { useForm } from "react-hook-form";
import { TextInput, NumberInput } from "@trendcapital/react-hook-form-mantine";

const schema = z.object({
  agree: z.boolean(),
  age: z.number().min(0).max(120),
});

type TFormInputs = z.infer<typeof schema>;

function MyForm() {
  const { control, handleSubmit } = useForm<TFormInputs>({
    resolver: zodResolver(schema),
  });

  const onSubmit: SubmitHandler<TFormInputs> = (data) => {
    console.log(data);
  };

  return (
    <FormProvider {...form}>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* Defaults to "input" component type */}
        <InputBase<TFormInputs> name="age" label="Age" placeholder="Enter your age" type="number" />

        <InputBase<TFormInputs, 'button'> name="agree" onClick={() => {
          console.log('All button props are allowed on this component')
        }} />

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

Available Components

• AngleSlider
• Autocomplete
• Checkbox
• CheckBoxGroup
• Chip
• ChipGroup
• ColorInput
• ColorPicker
• DateInput
• DatePicker
• DatePickerInput
• DateTimePicker
• FileInput
• Input
• InputBase (polymorphic component)
• JsonInput
• MiniCalendar
• MonthPicker
• MonthPickerInput
• MultiSelect
• NativeSelect
• NumberInput
• PasswordInput
• PinInput
• Radio
• RadioGroup
• Rating
• SegmentedControl
• Select
• Slider
• Switch
• SwitchGroup
• TagsInput
• Textarea
• TextInput
• TimeGrid
• TimeInput
• TimePicker
• YearPicker
• YearPickerInput

Attribution

Huge shout-out to @aranlucas for the original idea and implementation of this library; however, since that project has largely gone unmaintained for two years, including all attempts to create pull-requests to update dependencies, I decided to fork the project and update things myself.

You can see the original project here: aranlucas/react-hook-form-mantine

License

MIT