# @mui-ext/hookform

> react-hook-form @ Material UI (mui)

Latest version **0.0.9** (published 2023-03-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mui-ext/hookform
pnpm add @mui-ext/hookform
yarn add @mui-ext/hookform
bun add @mui-ext/hookform
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2023-03-02 |
| First published | 2022-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 37.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jiankai Zeng |
| Maintainers | janpoem |
| Keywords | mui-ext, mui, react-hook-form, hookform |

## Links

- npm: https://www.npmjs.com/package/@mui-ext/hookform
- Repository: https://gitee.com/janpoem/mui-ext
- npm.io page: https://npm.io/package/@mui-ext/hookform

## Dependencies (7)

- [@mui/styles](https://npm.io/package/@mui/styles.md) ^5
- [@mui-ext/core](https://npm.io/package/@mui-ext/core.md) 0.0.10
- [@mui/material](https://npm.io/package/@mui/material.md) ^5
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.9 (latest) — 2023-03-02
- 0.0.8 — 2023-03-02
- 0.0.7 — 2023-03-01
- 0.0.6 — 2023-02-24
- 0.0.5 — 2023-01-14
- 0.0.4 — 2023-01-07
- 0.0.3 — 2022-12-26
- 0.0.2 — 2022-12-25
- 0.0.1 — 2022-12-25

## README

# @mui-ext/hookform

[![gitee-repo](https://img.shields.io/static/v1?label=Gitee&message=https://gitee.com/janpoem/mui-ext&color=555555&logo=gitee&style=for-the-badge&labelColor=C71D23)](https://gitee.com/janpoem/mui-ext)
[![version](https://img.shields.io/npm/v/@mui-ext/hookform?style=for-the-badge)](https://www.npmjs.com/package/@mui-ext/hookform) 
[![dt](https://img.shields.io/npm/dt/@mui-ext/hookform?style=for-the-badge)](https://www.npmjs.com/package/@mui-ext/hookform)

react-hook-form@mui

该版本仅作为早期预览版本，并用于某项目中使用，所以测试代码未完善。

## 组件索引

- HookForm - 将 react-hook-form 表单声明包装成组件，支持泛型（但 hookform 的泛型其实意义不大）。
    - 生成的表单不使用 form 结构（为了和 RN 的使用保持一致的可替换性结构）。
    - setupHookForm - 全局表单配置
    - SubmitRow - 表单的提交按钮行（可选添加 reset、cancel 等，还可添加其他内容）。
    - FormField - react-hook-form Control 的实现，
    - FormFieldError - react-hook-form 的表单字段验证错误提示（目前仅支持 hook form rules 的验证）
    - Label - 针对表单的 Label 预留 I18n 扩展
    - useHookForm - 引用表单上下文，主要用于自行扩展表单组件使用
    - FormGenerator - 配置化表单生成器，上述的一切都没有绑定固定的标签结构，仅包含组件自身的基础内容，FormGenerator
      负责将所有组件整合。
- InputRegistry - 全局输入控件管理（该实例默认不对外直接访问，请通过下面的方面）
    - isRegInput, regInput, getRegInput

### 最基础的用法

```typescript jsx
import { HookForm, SubmitRow } from '@mui-ext/hookform';

<HookForm>
  {({ register }) => {
    return (
      <>
        <div>
          <input type="text" {...register('username')} />
        </div>
        <div>
          <input type="password" {...register('password')} />
        </div>
        <SubmitRow/>
      </>
    )
  }}
</HookForm>
```

### 结合 FormField 组件

```typescript jsx
import { HookForm, SubmitRow, FormField } from '@mui-ext/hookform';

<HookForm>
  <FormField name={'username'} label={'username'} input={'text'} rules={{ required: true }}/>
  <FormField name={'password'} label={'password'} input={'password'} rules={{ required: true }}/>
  <SubmitRow/>
</HookForm>
```

### useHookForm

```typescript
export type HookFormContext<T extends FieldValues = FieldValues> = {
  autoId: string,
  config: HookFormConfig,
  customErrors: HookFormCustomErrors<T>,
  setCustomError: (field: keyof T | string, err: HookFormCustomError | null) => void,
  setCustomErrors: (errs: HookFormCustomErrors<T>) => void,
  loading: boolean,
  setLoading: Dispatch<SetStateAction<boolean>>,
  gap: number | string,
  generalErrorKey: string,
  formSubmit: () => (e: BaseSyntheticEvent) => Promise<void>,
  validateReturn: typeof validateReturn
} & UseFormReturn<T>;
```

### FormGenerator

仅使用 fields

```typescript jsx
import { FormGenerator } from '@mui-ext/hookform';

// 已包含 SubmitRow
<FormGenerator
  fields={[
    { name: 'username', label: 'username', input: 'text' },
    { name: 'password', label: 'password', input: 'password' },
  ]}
/>
```

结合 layout

```typescript jsx
import { FormGenerator } from '@mui-ext/hookform';

<FormGenerator
  fields={[
    { name: 'username', label: 'username', input: 'text' },
    { name: 'password', label: 'password', input: 'password' },
  ]}
  layout={[
    ['username', 'password'],
  ]}
/>
```

---
_Source: https://npm.io/package/@mui-ext/hookform · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._