https://github.com/kom50/formik-validation-adaptors
A lightweight utility to integrate Zod and Joi validation with Formik.
https://github.com/kom50/formik-validation-adaptors
adaptors formik joi package validation zod
Last synced: 29 days ago
JSON representation
A lightweight utility to integrate Zod and Joi validation with Formik.
- Host: GitHub
- URL: https://github.com/kom50/formik-validation-adaptors
- Owner: kom50
- Created: 2025-02-06T21:33:52.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-04-11T14:16:26.000Z (6 months ago)
- Last Synced: 2025-04-12T06:06:47.460Z (6 months ago)
- Topics: adaptors, formik, joi, package, validation, zod
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/formik-validation-adaptors
- Size: 71.3 KB
- Stars: 17
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Formik Validation Adaptors
A lightweight utility package that provides validation adaptors for Formik using popular validation libraries like **Zod** and **Joi**. Easily integrate robust validation into your Formik forms with minimal setup.
## Installation
```bash
npm i formik-validation-adaptors
```
## Live Demo
[](https://stackblitz.com/edit/vitejs-vite-vvbccumy?file=src%2FFormikValidationWithZod.tsx)
## Features
- Zod Adaptor: Validate Formik forms using Zod, a TypeScript-first schema validation library.
- Joi Adaptor: Validate Formik forms using Joi, a powerful schema description language and validator.
- Lightweight: Only includes the validation logic you need.
- TypeScript Support: Fully typed for better developer experience.
## Usage
#### Zod Adaptor
Validate Formik forms using Zod schemas.
```js
import { formikZodValidator } from "formik-validation-adaptors";
import { z } from "zod";
import { Formik, Form, Field } from "formik";
const schema = z.object({
name: z.string().min(1, "Name is required"),
email: z.string().email("Invalid email"),
});
const initialValues = {
name: "",
email: "",
};
const FormikValidationWithZod = () => (
console.log(values)}
>
{({ errors }) => (
{errors.name &&
{errors.name}}
{errors.email && {errors.email}}
Submit
)}
);
export default FormikValidationWithZod;
```
#### Joi Adaptor
Validate Formik forms using Joi schemas.
```js
import { formikJoiValidator } from "formik-validation-adaptors";
import Joi from "joi";
import { Formik, Form, Field } from "formik";
const schema = Joi.object({
name: Joi.string().required().messages({
"string.empty": "Name is required",
}),
email: Joi.string()
.email({ tlds: { allow: false } })
.required()
.messages({
"string.email": "Invalid email",
"string.empty": "Email is required",
}),
});
const initialValues = {
name: "",
email: "",
};
const FormikValidationWithJoi = () => (
console.log(values)}
>
{({ errors }) => (
{errors.name &&
{errors.name}}
{errors.email && {errors.email}}
Submit
)}
);
export default FormikValidationWithJoi;
```
#### Vest Adaptor
Validate Formik forms using Vest, a unit-testing-style validation framework.
```js
import { formikVestValidator } from "formik-validation-adaptors";
import { create, test, enforce } from "vest";
import { Formik, Form, Field } from "formik";
// Define a Vest validation suite
const suite = create((data) => {
test("name", "Name is required", () => {
enforce(data.name).isNotEmpty();
});
test("email", "Invalid email format", () => {
enforce(data.email).matches(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/);
});
test("password", "Password must be at least 6 characters", () => {
enforce(data.password).longerThanOrEquals(6);
});
});
const initialValues = {
name: "",
email: "",
password: "",
};
const FormikValidationWithVest = () => (
console.log(values)}
>
{({ errors }) => (
{errors.name &&
{errors.name}}
{errors.email &&
{errors.email}}
{errors.password &&
{errors.password}}
Submit
)}
);
export default FormikValidationWithVest;
```
## Why Use This Package?
- **Seamless Integration**: Easily integrate Zod or Joi validation with Formik.
- **Type Safety**: Built with TypeScript for better type inference and error handling.
- **Flexibility**: Supports both Zod and Joi validation libraries.
- **Customizable**: Use your preferred validation library without additional boilerplate.
- **Lightweight**: Only includes the validation logic you need, keeping your bundle size small.
## Author
Maintained by [@kom50](https://github.com/kom50).