# formook

> Validation hook to deal with React forms

Latest version **2.0.1** (published 2020-10-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install formook
pnpm add formook
yarn add formook
bun add formook
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2020-10-29 |
| First published | 2020-05-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 3 |
| Unpacked size | 24 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | hupiat |
| Maintainers | hupiat |
| Keywords | form, hooks, react, light, package, with, validation, autocompletion |

## Links

- npm: https://www.npmjs.com/package/formook
- Repository: https://github.com/hupiat/formook
- Homepage: https://github.com/hupiat/formook#readme
- Issues: https://github.com/hupiat/formook/issues
- npm.io page: https://npm.io/package/formook

## Dependencies (3)

- [yup](https://npm.io/package/yup.md) ^0.29.3
- [@hapi/joi](https://npm.io/package/@hapi/joi.md) ^17.1.1
- [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.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.0.1 (latest) — 2020-10-29
- 2.0.0 — 2020-08-14
- 1.9.6 — 2020-08-14
- 1.9.5 — 2020-08-14
- 1.9.4 — 2020-08-01
- 1.9.3 — 2020-07-31
- 1.9.2 — 2020-07-31
- 1.9.0 — 2020-07-31
- 1.8.7 — 2020-07-31
- 1.8.6 — 2020-07-31
- 1.8.4 — 2020-07-31
- 1.8.3 — 2020-07-31
- 1.8.2 — 2020-07-06
- 1.8.1 — 2020-06-16
- 1.8.0 — 2020-06-16
- … 16 more at https://npm.io/package/formook/versions

## README

## Resume

Validation hook to deal with React forms

Designed to be used with a single object, allowing strong autocompletion

The validation trigger is debounced to optimize performances

`npm i formook --save`

## API

Validation schemas are made using a mix of :

- Yup (https://github.com/jquense/yup)
- Joi (https://hapi.dev/tutorials/validation/)
- Boolean validation functions, which can return strings as the error messages (meaning the validation result is assumed false). They are not present in joi, and unlike yup, they take the complete object in parameter

**The validation will be triggered only when the object is updated**

It forces you to update your object reference when you want to switch between schemas, but you should not need it as the dynamic schemas are made possible with functions

Note that Yup and Joi can't be used both at the same time, you need to use the function **switchHighLevelValidation** to define your schema library **(yup by default)**

```typescript
function switchHighLevelValidation: (
  schemaType: HighLevelSchema
) => HighLevelSchema;

function useFormValidation: <T extends object>(
  schema: FormValidationSchema<T>,
  object: T,
  options?: FormValidationOptions
) => {
  canValidate: boolean;
  errors: FormValidationError<T> [];
};
```

## Types

```typescript
type HighLevelSchema = "yup" | "joi";

type FormValidationSchemaFunction<T extends object> = (
  object: T
) => boolean | string;

type FormValidationErrors<T extends object> =
  | {
      [K in keyof T]?: string;
    }
  // This one is needed because of joi errors
  | { [K: string]: string };

type FormValidationOptions = Yup.ValidateOptions | Joi.ValidationOptions;
```

## Example

```typescript
interface Test {
  foo: number;
  foo2: string;
}

const object: Test = await fetchData();

let schema: FormValidationSchema<Test> = {
  foo: Yup.number.max(10),
  foo2: (object: Test) =>
    object.foo2.length > 5 || "Input should be at least 6 chars long",
};

// If you are using joi

switchHighLevelValidation("joi");

schema = {
  foo: Joi.number.max(10),
};

const { canValidate, errors } = useFormValidation(schema, object);
```

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