This tutorial is a continuation from the previous tutorial, where I created a Modal component in a Next.js application. In the current tutorial I will enhance it by allowing it to close when the user clicks outside of it. I will refer to this functionality as “close on backdrop click”. Enhance the Modal Here is…
In the last couple of years, Server Side Rendering(SSR) has become a big trend in modern web development. One of the most popular SSR solutions for React developers is Next.js and there are some common UI tasks that can be challenging when working in mixed server/client environment. In this tutorial, I will show you how…
Implementing typeahead(autocomplete) functionality used to be quite challeging before the modern front end technologies were introduced.In this tutorial, I will show you how I’ve implemented typeahead feature very quickly with React and Bootstrap. Before we start Aside from React, we will also use react-bootstrap which is a nice Bootstrap wrapper. Of course, you can use…
In this tutorial we will learn how to build web animations from scratch using React and the React Transition Group library. React Transition Group is a small library that allows us to create powerful animations and transition in our React applications. We will start with simple animation and then the complexity will increase with each…
In this blog post I am going to express my opinion and share my experience with the Styled components library. For a long time, there have been many discussions about the “proper” way to handle styling in React applications. In the beginning, the most common way to tackle styling was the CSS Modules. Then, due…
This post was originally written by me for the MentorMate blog . As one of the most dynamic fields in software development, front-end is constantly evolving. So much so that it can sometimes seem impossible to keep up with its many emerging trends and tools. With the adoption of ES6 and the functional nature of…
In this blog post, I will guide you through the creation of a simplistic contact form using two of the most popular technologies recently – Vue.js and Firebase. Prerequisites Here is all you need installed before we begin: Node.js (> 8.9 ) Vue CLI (optional but highly recommended) Firebase CLI After the dependencies have been…