I’m excited to announce my latest project, LearnLanguageOnline—a website offering free language lessons and exercises. This post outlines both the user experience and the technical development process. For Language Learners As a language learning enthusiast for over a decade, I’ve used…
Posts for "react"
Building a Simple Inline Edit Form with React
Creating intuitive inline editing functionality is a common requirement in modern web applications. In this tutorial, we’ll build a clean, performant implementation using only React – no additional libraries required. While we’ll focus on text input fields, the approach can be easi…
React – how to manage forms and validation with useReducer
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…
How to search for a string in a nested array of objects and keep the nested structure
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…
Tabs component with React Hooks
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 drillin…
Custom Tooltip component with React and TypeScript (+ Next.js)
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’…
Custom confirm dialog with React Hooks and the Context
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 soph…
Stepper component with React Hooks and Context
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 appli…
How to learn React in 2021
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 Ja…
Modal component with Next.js with close on backdrop click
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 o…