React hook form wrapper for Mantine components
npm install @trendcapital/react-hook-form-mantineReact-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.
``bash`
npm install @trendcapital/react-hook-form-mantine
`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 (
);
}
`
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 (
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 (
{/ This one will show an error on the name prop /}
name="email" label="Email" />
);
}
`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 (
name="agree" onClick={() => {
console.log('All button props are allowed on this component')
}} />
);
``- 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
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
MIT