React-Mui-Hook-Form

Creating forms in React is harder then 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.

...
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
...

interface DemoFormData {
  text: string;
  autoComplete: string;
  datetime: string;
  select: string;
  hint: boolean;
}

function App(): JSX.Element {
  const form = useHookForm<DemoFormData>();

  return (
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <HookFormProvider {...form}>
      <Stack spacing={3}>
        {button}

        <InputCheckbox formField={{ name: form.fieldName("hint") }} />

        <InputText formField={{ name: form.fieldName("text") }} />

        <InputSelect
            placeholderText="Select"
            formField={{ name: form.fieldName("select") }}
            selectableOptions={[
              { label: "Peter", value: "Peter", group: "Male" },
              { label: "Paul", value: "Paul", group: "Male" },
              { label: "Angela", value: "Angela", group: "Female" },
              { label: "Mary", value: "Mary", group: "Female" },
            ]}
        />

        <InputDateTimePicker formField={{ name: form.fieldName("datetime") }} />

        <LoadingButton
            buttonState={loadingButtonStateFromFormState(form.formState)}
            buttonText="Send"
            loadingButtonProps={{ variant: "contained" }}
        />
      </Stack>
    </HookFormProvider>
  </LocalizationProvider>
  );
}

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:

• InputText
• InputSelect
• InputSelectFromEnum
• InputRadio
• InputCheckbox
• InputEmail
• InputPasswordSet
• InputDateTimePicker
• InputAutoComplete

React Hook Form Enhancements

We also provide very slightly enhanced versions of

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

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