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

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

Usage

1import { useForm } from "react-hook-form";
2import { TextInput, NumberInput } from "@trendcapital/react-hook-form-mantine";
3
4function MyForm() {
5  const { control, handleSubmit } = useForm();
6
7  const onSubmit = (data) => {
8    console.log(data);
9  };
10
11  return (
12    <form onSubmit={handleSubmit(onSubmit)}>
13      <TextInput name="username" control={control} label="Username" />
14      <NumberInput name="age" control={control} label="Age" />
15      <button type="submit">Submit</button>
16    </form>
17  );
18}

Available Components

• AngleSlider
• Autocomplete
• Checkbox
• CheckBoxGroup
• Chip
• ChipGroup
• ColorInput
• ColorPicker
• DateInput
• DatePicker
• DatePickerInput
• DateTimePicker
• FileInput
• Input
• JsonInput
• 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