# formoid

> React library for building reliable forms.

Latest version **2.2.3** (published 2024-06-04) · MIT license · 0 weekly downloads

## Install

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

## 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.2.3 |
| Published | 2024-06-04 |
| First published | 2022-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 36.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | kolyamba2105 |
| Maintainers | kolyamba2105 |
| Keywords | react, react-hooks, form, validation, typescript |

## Links

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

## 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.2.3 (latest) — 2024-06-04
- 2.2.2 — 2024-04-21
- 2.2.1 — 2024-04-21
- 2.2.0 — 2024-04-20
- 2.1.1 — 2024-04-20
- 2.1.0 — 2024-04-20
- 2.0.1 — 2023-10-07
- 2.0.0 — 2023-06-28
- 1.1.1 — 2023-06-05
- 1.1.0 — 2023-06-05
- 1.0.19 — 2023-04-01
- 1.0.18 — 2023-02-28
- 1.0.17 — 2023-02-28
- 1.0.16 — 2022-08-17
- 1.0.15 — 2022-08-08
- … 15 more at https://npm.io/package/formoid/versions

## README

# formoid

React library for building reliable forms.

## Installation

```
pnpm add formoid
```

## Example

```ts
import { useForm, validator } from "formoid";

type FormValues = {
  name: string;
  password: string;
  confirmPassword: string;
};

const SignUpForm = () => {
  const initialValues: FormValues = {
    name: "",
    password: "",
    confirmPassword: "",
  };
  const { fieldProps, handleReset, handleSubmit } = useForm({
    initialValues,
    validationStrategy: "onBlur",
    validators: ({ password }) => ({
      name: validator.lengthRange(4, 64, "User name length must be between 8 and 64 chars!"),
      password: validator.parallel(
        validator.lengthRange(8, 64, "Password length must be between 8 and 64 chars!"),
        validator.match(/(?=.*[A-Z])/, "Password must contain at least 1 uppercase letter!"),
        validator.match(/(?=.*[a-z])/, "Password must contain at least 1 lowercase letter!"),
        validator.match(/(?=.*\d)/, "Password must contain at least 1 digit!"),
      ),
      confirmPassword: validator.fromPredicate(
        (confirm) => confirm === password,
        "Passwords do not match!",
      ),
    }),
  });

  const submit = () => handleSubmit((values) => saveData(values));

  return (
    <div className="p-4 h-full w-full">
      <div className="m-auto space-y-3 w-[500px]">
        <TextField {...fieldProps("name")} placeholder="John Doe" type="email" />
        <TextField {...fieldProps("password")} placeholder="********" type="password" />
        <TextField {...fieldProps("confirmPassword")} placeholder="********" type="password" />
        <div className="flex items-center justify-end space-x-2">
          <Button color="danger" onClick={() => handleReset()} type="reset">
            Reset
          </Button>
          <Button color="success" onClick={submit} type="submit">
            Submit
          </Button>
        </div>
      </div>
    </div>
  );
};
```

## Zod bindings

By using Zod bindings, you can create a custom hook wrapper that accepts a Zod
schema shape as an argument, instead of using built-in validators:

```ts
import { UnknownRecord, ValidationStrategy, ZodSchema, fromZodSchema, useForm } from "formoid";

export type ZodFormConfig<T extends UnknownRecord, S extends ZodSchema<T>> = {
  initialValues: T;
  schema: ((values: T) => S) | S;
  validationStrategy: ValidationStrategy;
};

export function useZodForm<T extends UnknownRecord, S extends ZodSchema<T>>({
  initialValues,
  schema,
  validationStrategy,
}: ZodFormConfig<T, S>) {
  return useForm({
    initialValues,
    validationStrategy,
    validators: (values) => fromZodSchema(schema instanceof Function ? schema(values) : schema),
  });
}

const { fieldProps, handleSubmit, handleReset, isSubmitting } = useZodForm({
  initialValues: {
    name: "",
    password: "",
    confirmPassword: "",
  },
  validationStrategy: "onBlur",
  schema: ({ password }) => ({
    name: z
      .string()
      .min(4, "User name length must be min 4 chars!")
      .max(64, "User name length must be max 64 chars!")
      .refine(isNonBlankString, "This field should not be blank"),
    password: z
      .string()
      .min(8, "User name length must be min 8 chars!")
      .max(64, "User name length must be max 64 chars!")
      .regex(/(?=.*[A-Z])/, "Password must contain at least 1 uppercase letter!")
      .regex(/(?=.*[a-z])/, "Password must contain at least 1 lowercase letter!")
      .regex(/(?=.*\d)/, "Password must contain at least 1 digit!"),
    confirmPassword: z.string().refine((confirm) => confirm === password, "Passwords do not match!"),
  }),
});
```

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