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:

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. We offer the following base types:

On top we offer widely used inputs with some flavor:

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:

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 🧠:

Package detail

@nwon/react-mui-hook-form

readme