https://github.com/lemoncode/fonk-formik
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.
https://github.com/lemoncode/fonk-formik
Last synced: 9 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/lemoncode/fonk-formik
- Owner: Lemoncode
- License: mit
- Created: 2019-10-17T11:50:26.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-12-19T11:29:00.000Z (about 6 years ago)
- Last Synced: 2025-05-08T01:43:57.183Z (9 months ago)
- Language: TypeScript
- Size: 63.5 KB
- Stars: 17
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fonk-formik
[](https://circleci.com/gh/Lemoncode/fonk-formik/tree/master)
[](https://www.npmjs.com/package/@lemoncode/fonk-formik)
[](https://bundlephobia.com/result?p=@lemoncode/fonk-formik)
This 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.
Start by reading this [post (Formik + Fonk)](https://www.basefactor.com/formik-form-validation-fonk)
Check our [Fonk Documentation site](https://lemoncode.github.io/fonk-doc/) and [Formik](https://lemoncode.github.io/fonk-doc/formik) section.
Adding **Fonk** to **Formik** allows you to seamlessly add validation capabilities to **Formik**.
In order to use **Fonk** with **Formik** you will have to install **fonk-formik** adaptor:
```bash
npm install @lemoncode/fonk @lemoncode/fonk-formik --save
```
The main change to apply when using a **fonk-formik** comes when you want to instantiate
**Fonk** engine with your form validation schema, instead of calling _createFormValidation_
, just replace that entry with _createFormikValidation_
```diff
- import { createFormValidation, Validators } from '@lemoncode/fonk';
+ import { Validators } from '@lemoncode/fonk';
+ import { createFormikValidation } from '@lemoncode/fonk-formik';
const validationSchema = {
field: {
email: [Validators.required.validator],
password: [Validators.required.validator]
}
};
- export const formValidation = createFormValidation(validationSchema);
+ export const formValidation = createFormikValidation(validationSchema);
```
Now you can hook to Formik form validation (example):
```diff
formValidation.validateForm(values)}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
```
And if you want to hook to Formik field validations (example):
```diff
formValidation.validateField("email", value)} />
```
Example: How to display field validation error message:
```diff
+ {errors &&
+ errors.email &&
+ touched.email &&
+
{errors.email}}
```
# Examples:
[Basic example](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/basic)
[Using formik Field](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/formik-components)
[Firing validations at field level](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/field-level-validation)
[Asynchronous validation](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/async-validator)
[Customizing validator's error messages globaly](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/custom-error-message-global)
[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)
[Creating custom validators](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/custom-validators)
[Validating nested fields](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/nested-field)
[Defining record validations](https://codesandbox.io/s/github/lemoncode/fonk/tree/master/examples/formik/js/record-validation)
# About Basefactor + Lemoncode
We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend