Getting Started

To see the repository on Github you can follow the link below.

Github Page | NPM Page

Formik helps you in 3 main topics

Getting values in and out of form state Validation and error messages Handling form submission

Installation

npm install formik --save

or

yarn add formik

Basic Usage of Formik

As you can see from the example we initialized initialValues

Validated our values and added submit function to submit the form values.

That is basically all required to create a form in your react applications :)

Autosave with Formik

With the help of React hooks and formik.useFormikContext() we can create our FormikAutoSave component as below. You can change debounceMs as you want here or pass as props where you call your component on render.

After we created our FormikAutoSave component we can use it in our form component as below.

Now we assigned debounceMs to 1000ms when you change something on your input fields it will debounce onSubmit function.

Note: important knowledge can be to learn debounce

Thank you for reading this far. If you enjoyed this post, please share, comment, and press that 👏 a few times (up to 50 times). . . Maybe it will help someone.

Follow me on Medium or Github if you’re interested in more in-depth and informative write-ups like these in the future. 😀

Melih