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…
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,…
Bootstrap has been around for 10 years and dominates the CSS framework world. However, recently, a new player appeared on the stage – Tailwind.css. It quickly gained popularity and more and more developers ask themselves which framework to use. I’ve never been a fan of flame wars and believe that every tool has its specific…
In this short blog post, I will show you how to create a custom step progress bar with CSS, which can be easily integrated into every application. Let’s first start with the easy part – the HTML. As you see, the stepper-item element has 2 additional classes – active and completed. In our application, you…
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…