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