React is a JavaScript library for building user interfaces.
When I started working on a live QR code scanner in React, I wanted to create something that not only displayed a webcam feed but also scanned and decoded QR codes in real time. With React, TypeScript, and a few powerful libraries, it turned out to be an engaging and surprisingly manageable task. Using react-webcam
Building components in React is always a rewarding experience, especially when the result is sleek, reusable, and visually impressive. Today, I’ll walk you through creating a progress bar in React that is always 100% wide, with a dynamic background that visually represents progress through a transparent effect on the right. We’ll use CSS and TypeScript
When running a production-grade React application served by Nginx, maintenance mode becomes a handy tool for planned downtime. I recently implemented maintenance mode for a Vite-powered React app and learned a lot about how to make it efficient and dynamic. Here, I’ll share the steps to set it up so that your app checks for
Recently, I was working on a React project that required certain elements to toggle fullscreen mode, and I needed to reuse this functionality across different components. I wanted a clean, reusable solution that leveraged TypeScript to ensure type safety. This led me to create a custom hook for managing fullscreen behavior in React. In this
When working with text-heavy web applications, you might come across scenarios where long text needs to be truncated after a certain number of lines. CSS properties like -webkit-line-clamp make this easy by limiting the visible lines of text, but you might need to know when that text has been clamped for purposes like showing a
Building responsive, interactive applications in React often requires creating components that dynamically change based on user interaction. One common feature is allowing a div to take over the entire screen with the click of a button, creating a fullscreen effect. In this post, I’ll walk through how to implement this feature, making sure to keep
Ensuring a consistent and user-friendly interface is a key aspect of web development. One common challenge is creating a sticky footer that remains at the bottom of the page regardless of the content length. In this blog post, I will guide you through creating a sticky footer using Mantine, a modern React component library. We’ll
Managing the user interface theme is crucial for enhancing user experience. With the increasing adoption of dark and light modes, providing users with the flexibility to choose their preferred theme has become more important. In this blog post, I’ll walk you through how to detect the system theme, allow users to set their preferred theme
Introduction As a developer, there are times when you need to allow users to edit JSON data directly within your React applications. While libraries like react-json-view offer a quick and powerful solution, sometimes you might want to implement a custom editor to better fit your application’s needs. In this blog post, I’ll walk you through
Form validation is a critical aspect of web development, ensuring that user inputs are accurate and meet the required criteria before submission. Effective form validation enhances user experience by providing immediate feedback and preventing errors. In this blog post, we’ll explore how to implement form validation in a React application using Fluent UI components and