1. Why we use Formik at WeGroup
A Deviner, that’s what you can almost call me. An internship away of a degree in Digital Design and Development. Though I’ve been working at WeGroup as a student since June 2018, I enjoyed my time in this challenging environment. Therefore I decided to start my internship here as a Front-end developer. In upcoming weeks, I will tackle common problems in a solution-oriented way, as well as why we use certain tools instead of others. Let’s go!
Smartforms
Recently, WeGroup changed their business model from B2C to B2B. However, some deals were still ongoing from the B2C-era, for which we use Smartforms.
Smartforms is a dynamic front-end form system, from which our back-end chatbot sends an expected input. The front-end shows the input to the user and it validates that input before sending it back to the back-end service. It’s awesome, since the back-end team can make new chatbot flows without changing anything to the front end. While front-end only needs to adapt the routing.
“Insurance-needs” aka Smartforms 2.0
“Insurance-needs” is a product aimed at the broker to interact with their new client. I call it Smartforms 2.0. Because it’s the next generation of calculating a premium, we implemented everything we learned from Smartforms on “Insurance-needs”.
While coding we noticed that it’s rather inefficient to work with a lot of input fields in React. Since every input has at least 2 states, the value itself and the validation-error.
Thats why we searched for different solutions and found Formik.
Formik
Okay, before we dive in. What is Formik exactly? Well, their slogan is:
Build forms in React, without the tears 😭 - Formik
Formik keeps track of your form’s state and then exposes it plus a few reusable methods and event handlers (handleChange, handleBlur, and handleSubmit) to your form via props.
Before we even consider implementing a library like this it had to check off a few points:
- It had to be completely reusable
- Easy validation
- It had to be recommended by Dan Abramov,…
All jokes aside, what it really shines for is in our opinion the validation.
Formik comes with baked-in support for scheme-based form-level validation through Yup.
Key takeaways
Formik increased our efficiency while coding by proving itself easy-to-use, fast and reusable. Therefore we can recommend all Front-end Developers that create forms, whilst working with React, to implement Formik!
