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

Textarea is an essential form element that helps add multi-line text to the input control. A text area can carry an unlimited number of characters. However, the textarea height remains fixed after adding the text resulting in scrolling back to the top to read the …

React scroll to top on route change example. What if you have a long web page? In that case, you will keep scrolling down. From the experience outlook, this method is not effective. We can manage scroll restoration in React effortlessly with React Router DOM …

Select element gathers user input from a series of options through a dropdown list component. Do you know how the Select element is created in React? In this tutorial, we will show you how to create a select dropdown in React. How to bind onChange …