npm package: @nwon/react-mui-hook-form-cjs
Description: React/frontend-related components, hooks and helpers as commonJs module
Author: NWON
Latest version: 2.0.14

# React-Mui-Hook-Form

Creating forms in [React](https://react.dev/) 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](https://mui.com/)
- [React Hook Form](https://react-hook-form.com/)
- [i18next](https://www.i18next.com/)

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.

```typescript
...
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:

- [InputAutoComplete](./src/formFields/baseTypes/InputAutoComplete/InputAutoComplete.tsx)
- [InputCheckbox](./src/formFields/baseTypes/InputCheckbox/InputCheckbox.tsx)
- [InputDatePicker](./src/formFields/baseTypes/InputDatePicker/InputDatePicker.tsx)
- [InputDateTimePicker](./src/formFields/baseTypes/InputDateTimePicker/InputDateTimePicker.tsx)
- [InputOutlinedInput](./src/formFields/baseTypes/InputOutlinedInput/InputOutlinedInput.tsx)
- [InputRadio](./src/formFields/baseTypes/InputRadio/InputRadio.tsx)
- [InputSelect](./src/formFields/baseTypes/InputSelect/InputSelect.tsx)
- [InputSelectFromEnum](./src/formFields/baseTypes/InputSelectFromEnum/InputSelectFromEnum.tsx)
- [InputSlider](./src/formFields/baseTypes/InputSlider/InputSlider.tsx)
- [InputSwitch](./src/formFields/baseTypes/InputSwitch/InputSwitch.tsx)
- [InputTextField](./src/formFields/baseTypes/InputTextField/InputTextField.tsx)
- [InputTimePicker](./src/formFields/baseTypes/InputTimePicker/InputTimePicker.tsx)
- [InputToggleButton](./src/formFields/baseTypes/InputToggleButton/InputToggleButton.tsx)
- [InputToggleButtonGroup](./src/formFields/baseTypes/InputToggleButtonGroup/InputToggleButtonGroup.tsx)

On top we offer widely used inputs with some flavor:

- [InputEmail](./src/formFields/InputEmail/InputEmail.tsx)
- [InputPasswordSet](./src/formFields/InputPasswordSet/InputPasswordSet.tsx)

### React Hook Form Enhancements

We also provide very slightly enhanced versions of

- FormProvider replacement [HookFormProvider](./src/formFields/HookFormProvider.tsx)
- useForm replacement [useHookForm](./src/formFields/formHelper/useHookForm.ts)
- useFormContext replacement [useHookFormContext](./src/formFields/formHelper/useHookFormContext.ts)

### 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](./src/formFields/errors/FormFieldError.tsx)

Or for some error message:

- [FormFieldErrorDisplay](./src/formFields/errors/FormFieldErrorDisplay.tsx)

We also expose the internally used hooks for retrieving errors:

- [useFormFieldError](./src/formFields/errors/useFormFieldError.ts)
- [useFormFieldHasError](./src/formFields/errors/useFormFieldHasError.ts)

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](./src/formFields/formHelper/syncSubmit.ts)

### Loading Button

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

- [LoadingButton](./src/LoadingButton/LoadingButton.tsx)
- [loadingButtonStateFromFormState](./src/LoadingButton/getLoadingButtonState.ts)
- [useLoadingButtonStateFromFormContext](./src/LoadingButton/getLoadingButtonState.ts)
- [loadingButtonStateFromReactQueryMutationStatus](./src/LoadingButton/getLoadingButtonState.ts)