# @vtaits/react-hook-form-schema

> Integration of react-hook-form and @vtaits/form-schema

Latest version **2.4.0** (published 2025-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vtaits/react-hook-form-schema
pnpm add @vtaits/react-hook-form-schema
yarn add @vtaits/react-hook-form-schema
bun add @vtaits/react-hook-form-schema
```

## Health

**Score 60/100 (C)** — status: stable.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.4.0 |
| Published | 2025-10-07 |
| First published | 2023-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 283 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Vadim Taits |
| Maintainers | vtaits |
| Keywords | react, react-hook-form, form, schama, serialization, parsing |

## Links

- npm: https://www.npmjs.com/package/@vtaits/react-hook-form-schema
- Repository: https://github.com/vtaits/form-schema
- Homepage: https://github.com/vtaits/form-schema#readme
- Issues: https://github.com/vtaits/form-schema/issues
- npm.io page: https://npm.io/package/@vtaits/react-hook-form-schema

## Dependencies (5)

- [es-toolkit](https://npm.io/package/es-toolkit.md) ^1.39.10
- [use-latest](https://npm.io/package/use-latest.md) ^1.3.0
- [react-async-hook](https://npm.io/package/react-async-hook.md) ^4.0.0
- [@vtaits/form-schema](https://npm.io/package/@vtaits/form-schema.md) ^3.1.1
- [@vtaits/react-form-schema-base-ui](https://npm.io/package/@vtaits/react-form-schema-base-ui.md) ^1.2.0

## 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

- 2.4.0 (latest) — 2025-10-07
- 1.2.0-alpha.19 (alpha) — 2025-06-19
- 2.3.1 — 2025-10-01
- 2.3.0 — 2025-08-25
- 2.2.0 — 2025-08-18
- 2.1.1 — 2025-08-11
- 2.1.0 — 2025-08-04
- 2.0.1 — 2025-07-08
- 2.0.0 — 2025-07-07
- 1.3.0 — 2025-06-27
- 1.2.0 — 2025-06-23
- 1.2.0-alpha.18 — 2025-06-18
- 1.2.0-alpha.17 — 2025-06-09
- 1.2.0-alpha.16 — 2025-02-07
- 1.2.0-alpha.15 — 2025-02-05
- … 17 more at https://npm.io/package/@vtaits/react-hook-form-schema/versions

## README

[![NPM](https://img.shields.io/npm/v/@vtaits/react-hook-form-schema.svg)](https://www.npmjs.com/package/@vtaits/react-hook-form-schema)
![dependencies status](https://img.shields.io/librariesio/release/npm/@vtaits/react-hook-form-schema)

# @vtaits/react-hook-form-schema

Integration of [react-hook-form](https://react-hook-form.com/) and [@vtaits/form-schema](https://github.com/vtaits/form-schema/tree/master/packages/form-schema).

## Installation

```bash
yarn add react-hook-form @vtaits/react-hook-form-schema
```

or

```bash
npm install react-hook-form @vtaits/react-hook-form-schema --save
```

or

```bash
bun add react-hook-form @vtaits/react-hook-form-schema
```

## Examples

- [All features](https://codesandbox.io/s/ldk9np)
- [Dynamic fields](https://codesandbox.io/s/tz3gct)

## Usage

```tsx
import { useFormSchema } from '@vtaits/react-hook-form-schema';

const {
  handleSubmit,
  renderField,
  setValues,
  parseAndSetValues,
  ...restResult
} = useFormSchema({
		defaultValues,
		getFieldSchema,
		getFieldType,
		mapErrors,
		names,
		...rest
});

const onSubmit = async (values, rawValues) => {
};

<form onSubmit={handleSubmit(onSubmit)}>
  {renderField("field1")}
  {renderField("field2")}

  <hr />

  {renderField("field3", "payload")}
</form>
```

It similar to `react-hook-form` but there is some differences:

- `getFieldSchema`, `getFieldType`, `names` are required. They are described in [@vtaits/form-schema](https://github.com/vtaits/form-schema/tree/master/packages/form-schema);

- `onSubmit` receives serialized values as first argument;

- `mapErrors` (not required) can map submission errors to set them with [@vtaits/form-schema](https://github.com/vtaits/form-schema/tree/master/packages/form-schema).

### renderField

A function for rendering field by name according to its schema. Arguments:

1. `name` - required, string, name of field for render;
2. `payload` - not required, payload prop of nested field;
3. `parents` - not required, stack of parent fields for child field.

### setValues

A function for setting runtime values of the form

### parseAndSetValues

A function that parses input and sets runtime values of the form

## Built-in field types

### Dynamic

Field depends from other fields. Example:

```tsx
import { dynamic } from '@vtaits/react-hook-form-schema/fields/dynamic';

const schema = {
  type: 'dynamic',

  getSchema: ({
    values: {
      otherField,
    },
    phase,
  }) => ({
    type: 'string',
    label: 'String field',
    required: Boolean(otherField),
  }),
};

const getFieldType = (fieldSchema) => {
  if (fieldSchema.type === 'dynamic') {
    return dynamic;
  }

  // ...
}
```

Parameters:

- `getSchema` - required, function, should return schema for render or `null`. Parameters:

  - `values` - object of values of form, depends from 2nd argument;

  - `phase` - current phase (`'parse'`, `'serialize'`, `'render'`). If phase is `'parse'`, 1st argument is initial values before parsing, otherwise it is current values of form.

  - `getFieldSchema` - see [@vtaits/form-schema](https://github.com/vtaits/form-schema/tree/master/packages/form-schema);

  - `getFieldType` - see [@vtaits/form-schema](https://github.com/vtaits/form-schema/tree/master/packages/form-schema);

  - `parents` - stack of parent fields above current field with runtime values;

- `getSchemaAsync` - not required, function. Can be used for asynchronous parsing. Similar to `getSchema` but should return `Promise` with result schema;

- `onShow` - not required, callback that called when field has shown. Parameters:

  - `formResult` - result of calling of `react-hook-form`;

  - `name` - name of field;

  - `schema` - result schema of subfield;

  - `getFieldSchema` - current `getFieldSchema`;

  - `getFieldType` - global `getFieldType`;

  - `parents` - stack of parent fields above current field with runtime values;

- `onHide` - not required, callback that called when field has hidden. Arguments:

  1. `formResult` - result of calling of `react-hook-form`;

  2. `name` - name of field;

  3. `getFieldSchema` - current `getFieldSchema`;

  4. `getFieldType` - global `getFieldType`;

  5. `parents` - stack of parent fields above current field with runtime values.

### Set

The group of fields. It's comfortable when the `dynamic` field must render several fields. Example:

```tsx
import { dynamic } from '@vtaits/react-hook-form-schema/fields/dynamic';
import { set } from '@vtaits/react-hook-form-schema/fields/set';

const schema = {
  type: 'dynamic',

  getSchema: ({
    responsibleType,
  }) => {
    if (responsibleType !== 'human') {
      return null;
    }

    return {
      type: 'set',
      schemas: {
        firstName: {
          type: 'string',
          label: 'First name',
        },

        lastName: {
          type: 'string',
          label: 'Last name',
        },
      },
    };
  },
};

const getFieldType = (fieldSchema) => {
  if (fieldSchema.type === 'dynamic') {
    return dynamic;
  }

  if (fieldSchema.type === 'set') {
    return set;
  }

  // ...
}
```

Parameters:

- `schemas` - required, object whose keys are field names and values are their schemas;

- `render` - not required, render function. . Arguments:

  1. `renderField` - analogous to `renderField` result of `useFormSchema`;
  2. `names` - fields names (keys of schemas);

## Utils

### renderBySchema

Similar to `renderField` of the result of `useFormSchema`, but have more arguments:

1. `formResult` - result of `react-hook-form`;
2. `getFieldSchema` - see above;
3. `getFieldType` - see above;
4. `getValues` - all values at the level of field;
5. `name` - the name of the field
6. `payload` - see above
7. `parents` - see above.

```typescript
import { renderBySchema } from '@vtaits/react-final-form-schema';
```

---
_Source: https://npm.io/package/@vtaits/react-hook-form-schema · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._