An essential part of our work as developers is to build forms, that allow our end users to provide input to our applications. There are multiple approaches on how to build and manage forms with React and in this tutorial I want to present my preferable way. Multiple times I’ve seen forms where developers create…
In this tutorial, we will create custom reusable Tabs component using best practices and no external libraries. In the end, we should be able to implement our Tabs component in the following way: Create the Context Create a fresh React app: We will use the Context API, in order to avoid prop drilling and make…
This tutorial is a continuation of the previous tutorial, where I created a Modal component in a Next.js 13 application, using the pages router. 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”.…
In this tutorial, I will show you how to create a basic Modal component from scratch in a Next.js application with pages router. Before we start Important: Next v13 with pages router was used for this tutorial . Here is the Github repository with the source code. If you are using an older version of…
Introduction Let’s imagine that we have a navigation, composed of 3(or more) levels of nesting. Our task is to add an inline search, allowing the user to search for a keyword in the navigation but, at the same time, we need to keep displaying the hierarchical structure of the menu, so that the results are…
In this short article, I will guide you through the decision process for how to decide whether to use type or interface when using TypeScript. For this purpose I have created a table, which clearly shows what the main differences between type and interface are. The table will help you better understand the conclusion on…
The confirm dialogs are used in almost every application. When working on internal apps, the developers tend to get lazy and use the browser’s ugly built-in confirm dialog. The fact that you’re reading this article suggests that you’re looking to replace it with something more sophisticated. Let’s create a custom confirm dialog, using React Hooks,…
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…
Tooltips are an essential part of modern interfaces and most of the popular UI frameworks have such components. However, as is often the case, you might want to create a custom tooltip that is more suitable for your specific needs. I recently came across the react-tooltip library, which I didn’t like at all. It used…