React-Mui-Hook-Form

Creating forms in React is harder than one might think 🙈. After a lot of trying we settled on a solution we are quite happy with. We basically use the awesome work of the following three packages in order to provide easy to use translatable form elements:

• MUI
• React Hook Form
• i18next

The aim of this package is to provide an easy to use wrapper connecting these packages.

TLDR

This is a basic example on how to use this package.

1...
2import { LocalizationProvider } from "@mui/x-date-pickers";
3import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
4...
5
6interface DemoFormData {
7  text: string;
8  autoComplete: string;
9  datetime: string;
10  select: string;
11  hint: boolean;
12}
13
14function App(): JSX.Element {
15  const form = useHookForm<DemoFormData>();
16
17  return (
18  <LocalizationProvider dateAdapter={AdapterDayjs}>
19    <HookFormProvider {...form}>
20      <Stack spacing={3}>
21        {button}
22
23        <InputCheckbox formField={{ name: form.fieldName("hint") }} />
24
25        <InputText formField={{ name: form.fieldName("text") }} />
26
27        <InputSelect
28            placeholderText="Select"
29            formField={{ name: form.fieldName("select") }}
30            selectableOptions={[
31              { label: "Peter", value: "Peter", group: "Male" },
32              { label: "Paul", value: "Paul", group: "Male" },
33              { label: "Angela", value: "Angela", group: "Female" },
34              { label: "Mary", value: "Mary", group: "Female" },
35            ]}
36        />
37
38        <InputDateTimePicker formField={{ name: form.fieldName("datetime") }} />
39
40        <LoadingButton
41            buttonState={loadingButtonStateFromFormState(form.formState)}
42            buttonText="Send"
43            loadingButtonProps={{ variant: "contained" }}
44        />
45      </Stack>
46    </HookFormProvider>
47  </LocalizationProvider>
48  );
49}

What we offer

This package includes basic input components and some helpers to make your life easier.

Input components

We provide a bunch of form elements that can be used in a React Hook Form Context. We offer the following base types:

• InputAutoComplete
• InputCheckbox
• InputDatePicker
• InputDateTimePicker
• InputOutlinedInput
• InputRadio
• InputSelect
• InputSelectFromEnum
• InputSlider
• InputSwitch
• InputTextField
• InputTimePicker
• InputToggleButton
• InputToggleButtonGroup

On top we offer widely used inputs with some flavor:

• InputEmail
• InputPasswordSet

React Hook Form Enhancements

We also provide very slightly enhanced versions of

• FormProvider replacement HookFormProvider
• useForm replacement useHookForm
• useFormContext replacement useHookFormContext

Error handling

All of our Inputs include some basic error handling. Displaying and marking them as accordingly.

We also offer components for display errors for a given field name:

• FormFieldError

Or for some error message:

• FormFieldErrorDisplay

We also expose the internally used hooks for retrieving errors:

• useFormFieldError
• useFormFieldHasError

All of our error related hooks and components can handle nested keys and arrays.

Little helpers

And some little helpers:

• Turn async submit handlers in synchronous ones: syncSubmit

Loading Button

And a special goodie. An easy to use loading button with some helper to retrieve its status 🧠:

• LoadingButton
• loadingButtonStateFromFormState
• useLoadingButtonStateFromFormContext
• loadingButtonStateFromReactQueryMutationStatus