@nwon/react-mui-hook-form NPM

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:

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>
  );
}