{"id":27976993,"url":"https://github.com/lemoncode/fonk-formik","last_synced_at":"2025-05-08T01:44:01.402Z","repository":{"id":57126688,"uuid":"215779755","full_name":"Lemoncode/fonk-formik","owner":"Lemoncode","description":"This package serves as the entry point to the Formik Form state management library. It is intended to be paired with the generic Fonk package, which is shipped as to npm.","archived":false,"fork":false,"pushed_at":"2019-12-19T11:29:00.000Z","size":65,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-08T01:43:57.183Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lemoncode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-17T11:50:26.000Z","updated_at":"2023-09-07T06:21:37.000Z","dependencies_parsed_at":"2022-08-31T12:12:00.673Z","dependency_job_id":null,"html_url":"https://github.com/Lemoncode/fonk-formik","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Ffonk-formik","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Ffonk-formik/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Ffonk-formik/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Ffonk-formik/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lemoncode","download_url":"https://codeload.github.com/Lemoncode/fonk-formik/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252983757,"owners_count":21835758,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-08T01:44:00.620Z","updated_at":"2025-05-08T01:44:01.365Z","avatar_url":"https://github.com/Lemoncode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fonk-formik\n\n[![CircleCI](https://badgen.net/github/status/Lemoncode/fonk-formik/master/ci?icon=circleci\u0026label=circleci)](https://circleci.com/gh/Lemoncode/fonk-formik/tree/master)\n[![NPM Version](https://badgen.net/npm/v/@lemoncode/fonk-formik?icon=npm\u0026label=npm)](https://www.npmjs.com/package/@lemoncode/fonk-formik)\n[![bundle-size](https://badgen.net/bundlephobia/min/@lemoncode/fonk-formik)](https://bundlephobia.com/result?p=@lemoncode/fonk-formik)\n\nThis package serves as the entry point to the Formik Form state management library ([Live example](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/basic)). It is intended to be paired with the generic Fonk package, which is shipped as to npm.\n\nStart by reading this [post (Formik + Fonk)](https://www.basefactor.com/formik-form-validation-fonk)\n\nCheck our [Fonk Documentation site](https://lemoncode.github.io/fonk-doc/) and [Formik](https://lemoncode.github.io/fonk-doc/formik) section.\n\nAdding **Fonk** to **Formik** allows you to seamlessly add validation capabilities to **Formik**.\n\nIn order to use **Fonk** with **Formik** you will have to install **fonk-formik** adaptor:\n\n```bash\nnpm install @lemoncode/fonk @lemoncode/fonk-formik --save\n```\n\nThe main change to apply when using a **fonk-formik** comes when you want to instantiate\n**Fonk** engine with your form validation schema, instead of calling _createFormValidation_\n, just replace that entry with _createFormikValidation_\n\n```diff\n- import { createFormValidation, Validators } from '@lemoncode/fonk';\n+ import { Validators } from '@lemoncode/fonk';\n+ import { createFormikValidation } from '@lemoncode/fonk-formik';\n\nconst validationSchema = {\n  field: {\n    email: [Validators.required.validator],\n    password: [Validators.required.validator]\n  }\n};\n\n- export const formValidation = createFormValidation(validationSchema);\n+ export const formValidation = createFormikValidation(validationSchema);\n```\n\nNow you can hook to Formik form validation (example):\n\n```diff\n    \u003cFormik\n      initialValues={{ email: \"\", password: \"\" }}\n+     validate={values =\u003e formValidation.validateForm(values)}\n      onSubmit={(values, { setSubmitting }) =\u003e {\n        setTimeout(() =\u003e {\n          alert(JSON.stringify(values, null, 2));\n          setSubmitting(false);\n        }, 400);\n      }}\n    \u003e\n```\n\nAnd if you want to hook to Formik field validations (example):\n\n```diff\n  \u003cform onSubmit={handleSubmit}\u003e\n    \u003cField\n      name=\"email\"\n+     validate={(value) =\u003e formValidation.validateField(\"email\", value)} /\u003e\n```\n\nExample: How to display field validation error message:\n\n```diff\n    \u003cField name=\"email\"/\u003e\n+    {errors \u0026\u0026\n+      errors.email \u0026\u0026\n+       touched.email \u0026\u0026\n+       \u003cdiv\u003e{errors.email}\u003c/div\u003e}\n```\n\n# Examples:\n\n[Basic example](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/basic)\n\n[Using formik Field](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/formik-components)\n\n[Firing validations at field level](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/field-level-validation)\n\n[Asynchronous validation](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/async-validator)\n\n[Customizing validator's error messages globaly](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/custom-error-message-global)\n\n[Customizing validator's error messages just for a given form](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/custom-error-message-local)\n\n[Creating custom validators](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/custom-validators)\n\n[Validating nested fields](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/nested-field)\n\n[Defining record validations](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/record-validation)\n\n# About Basefactor + Lemoncode\n\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\n\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\n\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\n\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemoncode%2Ffonk-formik","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemoncode%2Ffonk-formik","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemoncode%2Ffonk-formik/lists"}