React developers use <select> elements to let users choose one of multiple options and collect their input. You can, however, customize the <select> element to let users choose multiple options. In this article, we will explore how to implement multi-select dropdown in React. First, we’ll…
Sometimes web developers need to access the height of DOM elements in React. In this article, we will show the most readable and efficient way to do this while following best practices of React. Get height of an element in React There are three essential…
scrollIntoView() is a JavaScript method that scrolls to element it is called on. Since React is a JavaScript library, we can use it to scroll to element in React. Scroll to element on click Here’s an example where we scroll to element when user clicks…
We’re going to use react-router to redirect in React. Redirect to another page with useNavigate() hook react-router version 6 provides a useNavigate() hook, which returns a function that navigates to the path provided as a string argument.. Here’s an example: There are multiple ways to…
In this article, we will explore a number of different ways to get current URL in React. There are basically two ways: window.location to access current URL in React location is one of many properties on the window interface. Its value is an object that…
In this article, we will explain onKeyDown and discuss its practical use cases in React. We’ll also look at how to use onKeyDown with <input> elements and listen for specific keys like ‘Enter’. Handle onKeyDown event in React React internally supports onKeyDown event. Simply set…
Going to the previous page is essential part of browsing experience. In this article, we will explore how to implement a ‘go back’ feature in React. How ‘go back’ feature works Browsers keep track all URLs you visit when browsing a website. This information is…
In this article, I’ll show you how to set onClick handler on <Link> components. Set onClick on <Link> component First, let’s take a look at a typical <Link> component: When users click the Link, it’ll take them to the relative URL specified in the to…
React web applications are essentially component trees with branches – a component might render multiple components, which render more components on their own. To build any kind of useful web application, you need to know how to render multiple components in React. Common mistakes Every…
Nowadays many web applications are overloaded with content. Sometimes you need to highlight certain elements or components by setting scroll position in React. In this article, we’ll show you how to set scroll position when component mounts or when users click a button. Set scroll…
