Creating ReactJS forms with Formik & Yup

Makes the React Application run

// adding react-formik package. Using app based on [Create React App](https://github.com/facebook/create-react-app)
npx create-react-app react-formik
cd react-formik

// using yarn
npm install -g yarn

// we are going to need bootstrap
yarn add bootstrap

// adding basic styling
// adding yup form validation
yarn add formik styled-components yup

// start yarn
yarn start

// open browser to
open http://localhost:3000/

Formik

What Formik does:

• Getting state values
• Validation and error messages
• Handling form submission on Form

What Formik provides out of the box:

Formik provides: Formik, Form, Field, and ErrorMessage.

How can I use Formik:

Just wrap the Form component inside Formik component:

<Formik>
  <Form>
    {/* here will be dragons */}
  </Form>
</Formik>

What Yup does:

Yup is an object schema validator. Simple put it is a library that allows you to define the blueprint of a JS object and ensure that the object values match that blueprint through the validation process.

Custom and predefined fields

Formik provided pre-defined Fields out of the box, we will implement it and also create a new Custom field to compare both options

Schemas

Finally we will set a blueprint of the JS object in a object. So we can later on re-use it.

DEMO Screenshot

Further information

Thanks to Jared Palmer for this great tool, further information: react-hook-form

---

💯 Thanks!

Now, don't be an stranger. Let's stay in touch!

🔘 linkedin: @LeoLanese

🔘 Twitter: @LeoLanese

🔘 Portfolio: www.leolanese.com

🔘 DEV.to: dev.to/leolanese

🔘 Blog: leolanese.com/blog

🔘 Questions / Suggestion / Recommendation: developer@leolanese.com