Repo of the Day
robertLichtnow/zod-formik-adapter
Published: Nov 10, 2022
Open repository ↗Summary
zod-formik-adapter is a small TypeScript library that bridges zod and Formik by converting a zod schema into something Formik can use for validation. It exposes two helpers, toFormikValidationSchema and toFormikValidate, so the same zod schema can drive either Formik's validationSchema prop or its validate prop. The library is published under the MIT license.
What it is useful for
Formik is an established React form library that accepts either a Yup-style schema or a custom validate function. Many teams have standardized on zod for runtime validation across their stack, but zod's schema objects are not directly compatible with Formik's validationSchema prop, which historically expects a Yup-shaped schema. This adapter removes that mismatch so engineers can define one zod object schema and reuse it in client-side forms without maintaining a parallel Yup schema.
It is useful when:
- You already use zod elsewhere (e.g., for API payload validation) and want a single source of truth for field rules in your forms.
- You want a typed schema that produces the error shape Formik expects (
{ field: 'message' }), soformik.errors.nameandformik.touched.namework as Formik's API documents. - You prefer a functional
validatefunction over a class-basedvalidationSchema, for example to keep the form layer purely functional.
How engineers can use it
The README documents two install commands and two usage patterns. Both install lines and code samples are taken directly from the source.
Install:
npm install zod-formik-adapter
# or
yarn add zod-formik-adapter
Use as validationSchema:
import { z } from 'zod';
import { Formik } from 'formik';
import { toFormikValidationSchema } from 'zod-formik-adapter';
const Schema = z.object({
name: z.string(),
age: z.number(),
});
<Formik validationSchema={toFormikValidationSchema(Schema)}>
{/* form fields */}
</Formik>
Use as a validate function:
import { z } from 'zod';
import { Formik } from 'formik';
import { toFormikValidate } from 'zod-formik-adapter';
const Schema = z.object({
name: z.string(),
age: z.number(),
});
<Formik validate={toFormikValidate(Schema)}>
{/* form fields */}
</Formik>
Limitations and notes from the source: the README does not document the package's peer dependency versions for zod or Formik, how non-z.object schemas behave, support for async refinements or transforms, or how custom zod error messages are mapped into Formik's errors object. It also does not describe testing, build, or contribution steps beyond the install and usage examples above. Engineers adopting this should check the repository's package.json and issues for the currently supported zod major version before upgrading.