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…
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…
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,…
In this tutorial, we’re going to create a simple and easily customizable Stepper component. For the purpose of showing the Stepper component in action, I will also use the Stepper progress bar from my previous tutorial and wrap it into a Styled component. Let’s create a fresh React application Manage state with useReducer I will…
It has been more than 4 years since I started using profesionally React. When I look back, I wish I had approached the learning process differently. In this blog post, I will share my experience and advices for everyone just starting his journey into this great library. 1. Make sure you know well JavaScript and…
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…