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

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

Basic Usage

`jsx
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 (






Submit


);
}


`

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

`jsx
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 (





Submit

);
}


`

Input Name Assertion

`jsx
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;

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

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

return (



name="username" label="Username" />
name="age" label="Age" />

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

Submit

);
}

`

InputBase Component Polymorphism

`jsx
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;

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

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

return (



{/ Defaults to "input" component type /}
name="age" label="Age" placeholder="Enter your age" type="number" />

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

Submit

);

``

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