React Custom Context Menu (Right Click Menu) Tutorial

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 …

How to Create React Internet Speed Meter Component

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 …

React Check Internet or Network Connection Status Tutorial

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 Custom Reading Progress Bar Component Tutorial

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 …

React Js TypeScript Keyboard Event Handler Tutorial

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 …

How to Build Reusable React Toggle Switch Component

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. …