Forem: Srishti Sharma

Creating forms with Formik in React

Srishti Sharma — Fri, 02 Jul 2021 16:27:54 +0000

Introduction

Forms are an important medium to collect user's information which helps us to deliver better features in the future of the application. In this article we will learn about formik. Why do we need it? What problems it solves? The different features and options available in it that makes our work more easy and manageable.

In general, to create a form we make use of the most basic html input tag which primarily consists of input fields such as text-areas, checkboxes, radio-buttons, select-options, etc.
We can create a form in javascript using these basic input types available. For example, take a look at the basic login form shown in the below image:

When we talk about doing this in react, we can follow this approach but it seems to be an old-school way and not the react way!
Let's create a simple login form in react with two fields, email and password.
We can make use of local state and can capture the input by calling onChange or other event function depending on the input we are using, and can use the information as required.
Refer to the below following example:

This form seems quite easy as it has only two fields to handle.
But as our fields starts to add up, and our form starts to grow, it becomes bit complex, as declaring states for each field, handling the event functions for each of them, and in that too if we have to handle validations, it will be very difficult to manage(for those who have experienced such a problem, definitely know the pain of managing each and every field state in a form). So what should we do to handle huge forms while handling the validations and not compromising the user's crucial information? Answer to this question is to use Formik. Yes, this is where formik acts like a life saviour.

What is Formik?

Formik is a library which helps us to handle complex forms without worrying about the form state. It basically helps us with the 3 most annoying parts involved with a form:

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

The main idea behind Formik is to create a scalable, performant, form helper with a minimal API that does the really really annoying stuff, and leaves the rest up to us.

Installation

Using NPM

npm install formik --save

Using YARN

yarn add formik

Using CDN

Simply add the following <script> tag to the bottom of your HTML file.

<script src="https://unpkg.com/formik/dist/formik.umd.production.min.js"></script>

Basics of Formik

Formik generally provides some functions to handle events at form level like handleChange, handleBlur, and handleSubmit. We can add these functions to our form via props.
Let's check the most basic example of how to use Formik:

See how we replaced the html <input> with formik's <Field> tag. It provides more flexibility to customise the input fields along with existing features of formik.
<Field /> automatically hook up the inputs to Formik. It uses the name attribute to match up with Formik state. <Field /> will default to an HTML <input /> element.

We basically wrap the Form inside the Formik tag. It uses a render props pattern, which then handles the form state separately from our component's state.

It gives us lot of useful props like values, errors, setFieldValue, setFieldTouched, etc. Values prop is the most commonly used prop to fetch out the current form state value at any point, similarly errors provide us with an array/object which will contain field name and the required error message which we want to display to the user for better user experience.

Validating with Formik

As you can see we have a validate function inside Formik.
It accepts either a synchronous or asynchronous function, where we can actually define a set of rules for our form values, defining what values are acceptable or are mandatory for the user to fill. So using validate, it's upto us what validations we want to add.

Validations with Yup

Also, if we have a lot of validations in our form, we can use a third party library like Yup. In fact, formik has a special config option/prop for Yup object schemas called validationSchema which will automatically transform Yup's validation errors into a pretty object whose keys match values and touched. This symmetry makes it easy to manage business logic around error messages.
So either we can use the validate function of Formik or Yup's validationSchema depending upon the expectations.

Example of validating email and password:

Arrays and Nested Objects

When we deal with the real-life projects we end up handling complex objects or arrays as data type but worry not formik also provides support for arrays and nested objects.

Formik provides us with <FieldArray> component which helps us in dealing with array/list operations. We can pass a property in name with the relevant path of the key in the array we want to deal.
We can then use the inbuilt methods like push, swap, move, insert, unshift, remove, pop, replace, provided by arrayHelpers for performing the basic calculations like adding, removing first/last element in an array, etc.

Here are some example :

Consider the address field which we initialised as an empty array. We have the ability to add address values using Add button. On click of the button, it calls arrayHelpers.push() method which takes in the value and adds it in the array defined in the name props of FieldArray.
Similarly, for removing any address, we are calling arrayHelpers.remove(), which takes in an index, and removes that particular item from the array.
So, we don't have to care about spreading the array and then assigning it again and stuff like that.
It makes very easy and simple to deal the arrays/objects.

Form Submission

So far we discussed about installing, validating stuff, working with arrays, which leaves us with the final step of the form cycle i.e, form submission.
To be precise, when we submit a form, it calls the onSubmit method of formik.

There are a couple of steps followed before the final submission like:

Pre-Submit: In this step, it touches all the fields once, incrementing submitCount=+1 and also checks for initialValues, which are required and should be specified(preferable).
Validate: Here it checks all field-level validations, validate function, and validationSchema asynchronously and deeply merge results.
- In case of any errors it simply aborts the submission, setting isValidating to false, set errors, set isSubmitting to false.
- If no errors are found then it completes the submission
Submission: It starts by calling your submit-handler (onSubmit/handleSubmit), and sets isSubmitting to false, completing the form cycle.

Example showing isSubmitting, isValidating values:

Basically, what is happening here is when we click on submit button, it first checks for the initial values, then calls the validate function.
In this case, as email and password fields are required, we are setting error object with some message we want to display.
As soon as user clicks on-submit button, the error message pops up, letting the user know which fields are mandatory to fill. Thus, it makes easier for us to deal with forms and validation, thereby, giving a better user experience.

Conclusion

Summing up, all we talked about was, the overview of formik, how it works, how it helps us in dealing with the messy operations involved in while dealing with a form, and how it lets us to focus on what's important, handling all the tedious work itself.
Similar to formik there are other libraries as well, would really like to try out the alternate options available, but for now this was all I knew.
Hope this article helped you in understanding the basics of formik. This piece of information only explains a very little part of what features and options we can avail but there is a lot more in it.
You can read the Formik documentation for more understanding.

Thank you for your patience.
Happy Coding :)

Building A Dashboard In Svelte

Srishti Sharma — Fri, 06 Mar 2020 09:49:05 +0000

Introduction:

The newest entry in the race to be the best JavaScript framework in the market today is Svelte. It is a new JavaScript framework just like React, Vue and Angular, but with a twist.

What makes Svelte spectacularly fresh and promising is the fact that it offers the following features:

No virtual DOM
Boilerplate free code
More of a compiler
Very Easy Syntax
In-built Store

It presents a radical new approach to building user interfaces. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Not just that, Svelte has many other amazing features at your disposal as well— outstanding performance, small bundles, accessibility, built-in style encapsulation, declarative transitions, ease of use, the fact that it's a compiler, etc. are just some of them.

How It Started:

With me, it's like whenever I hear about something new, I want to dig deep into it and when I heard about Svelte, I knew I had to do something with it. So, to begin with, I started with the basics of Svelte. Reading about how to declare a variable to handling events, I learnt it all very quickly.

Does that make me a quick learner? I don't know ? but the real reason was that Svelte made it easy. In fact, anyone who knows basic JavaScript, HTML and CSS can understand Svelte without a hiccup. It is really that simple.

The Idea behind the Dashboard:

I had learnt the basics of Svelte and now wanted to use my concepts to build some sort of a mini-project. I was searching for some reference but could not find anything suitable. That was until I found the sb-admin-dashboard, which is a very famous dashboard to start with and nobody had made it in Svelte yet. I counted my blessings and decided to create one from scratch. I had my project in front of me. All I had to do next was get to work. In my head, the dashboard looked something like this (which is exactly how it turned out):

Dashboard

Problems I Faced:

After I decided what to make and started coding, I gradually started to realize that there were some issues that I needed to address. First off, I needed to figure out how to manage CSS. Spending a majority of the time writing CSS when I am in the process of learning Svelte was felt like an injustice to Svelte. So, I needed a UI-Component Library to help me ease into it. After some searching, I found one called SvelteStrap.

SvelteStrap:

It is a UI-Component Library for Svelte. More practically, it is a Bootstrap Library built exclusively for Svelte. If you want to read about it in detail, You can follow this link for more info.

The next problem that struck was routing and folder structure. How do I handle routes? Svelte does not have any in-built routing services and I needed one to make my dashboard work. A little cruising off the internet coast led me to a solution for that too, which was Sapper. Yes, another framework which comes with server-side rendering, routing, highly efficient folder structure management and a lot more.

Sapper :

Sapper is short for (S)velte (App) Mak(er). According to the English dictionary, Sapper was a term used for soldiers responsible for building bridges, repairing roads, handling demolitions during wars. Made a lot of sense because in a way, this is what Sapper does for Svelte.
Sapper includes all of Svelte's features plus additional features which supplement the existing goodness of Svelte, which is why it is the official recommendation from the Svelte team to build server-side rendered apps with routing.
How, you may ask? Sapper provides the following:

Routing

Server-side rendering
Automatic code splitting
Offline support(using Service Workers)
High-level project structure management

How does Sapper Work?

Well, there are two basic concepts that Sapper is based upon:

Sapper considers each page of the application as a Svelte component, and
We create pages by adding files to the src/routes directory of our project. These pages will then be server-rendered so that a user's first visit to your app is as fast as possible before a client-side app takes over.

How Sapper Manages Folder Structure:

Every Sapper project has three entry points along with a src/template.html file:
src/client.js : entry point of the client-rendered app.
src/server.js : entry point for the server to serve the app
src/service-worker.js (optional) : gives access to features like offline support, push notifications, background synchronization.

How Sapper handles routes:

Navigation between pages can be handled by using basic HTML anchor tag. Just provide the page's name in the href attribute and boom, you're done! It is that simple, believe me you!

Layouts:

So far, we've treated pages as entirely standalone components but what about navigation? We all are aware of the fact that upon navigating within an app, the existing component is destroyed and a new one takes its place. But in many applications, there are elements that should be visible on every page, such as top-level navigation, a sidebar or a footer. Instead of repeating them in every page, we can use layout components so that the common ones are not repeated again and again.

To create a layout component that applies to every page, just make a file called src/routes/_layout.svelte.

Talking about the dashboard that I'm building, it actually has two layouts: the one with a sidebar and a top-navigation bar and the other with none of these.

The one with sidebar and navbar
The one with no sidebar and navbar

I bifurcated these layout by using a simple if-else, but Sapper provides a better way of doing it, which is by creating nested layouts. For now I have not implemented it but will surely do in the near future.

This was all about the things which I used and how I used them to build this dashboard. As it is a work in-progress, I'll be adding more to it from time-to-time. Also, it is completely open-source so I would really appreciate if anyone wants to contribute. The end goal is to make it ready to use for any one who wants to start with a simple dashboard in Svelte.

Check the live demo of the dashboard here

The GitHub repo of the dashboard is here

It is an amazing experience to build something new in a technology that is recent and promising. With the pace that it's picking up, I think sooner than later, Svelte will be the ideal framework to work with and build apps in.

Doubt that? Well, why don't you go and check it out.

I also appreciate you taking time out to read my piece. A big thank you to you for that.