React Right-click menu example. Context menu, aka contextual, shortcut, or popup menu, is an essential GUI element. It manifests on the screen when a user right-clicks using a mouse. This comprehensive tutorial will teach you how to create a custom context menu in React js …

React Render Virtualize Large List example. In React, Data in large numbers can profoundly impact on website’s performance. Don’t worry if you want to tackle such a problem. Have you ever heard the term Virtualize? Well, if you haven’t heard it before, then don’t worry. …

In this simple guide, we will learn how to create an Internet speed meter component in React using the react-internet-meter package. We will create a simple React app to display the Internet speed in React. We will take help or install react internet speed meter …

In this tutorial, we will teach how to gradually, and step-by-step detect the internet connection state Online / Offline in React js application using browser APIs. In modern application, user-experience is the secret ingredient that intact the users’ interest. Providing internet connection status to the …

React set base URL example. A base URL is a stagnant string path that can be seen in the browser’s address bar. Theoretically, it is a common prefix used to allow navigation within a web application. Seldom we have to add a new base URL …

Reading progress bar indicators are mostly seen on blogs as well as social reading sites. The reading progress bar provides the ideal way to motivate your site visitors to scroll through the whole web page to read your site’s content continually. In this guide, we …

Sometimes the need arises to go back to the previous route or page in React js application. Fret not! In React, you can easily travel back to the last page or URL you visited earlier. In this tutorial, we will learn how to build a …

Event handler plays essential roles in handling events. In general, events are triggered through the mouse. However, sometimes user needs to fire events through keyboard buttons. This post will show you how to handle keyboard events in React TypeScript app using the KeyboardEvent object. KeyboardEvent …

Toggle switches help change the state for specific functionality. A toggle switch, aka “toggles”, is a user interface element that contains two mutual states, e.g., ON and OFF. Toggle switches are almost identical to physical switch that allows us to turn things ON and OFF. …