A neat custom React Hook that shows how to use local storage in React to store state. You can just use it in any React component and it allows you to write and read state to and from the local storage: The local storage hook is only there as a learning experience though. If you rely on the local storage for your React application in production…
A tutorial about how to detect a click outside of a React component by creating a custom React hook for it. For example, you may want such custom React hook for various components like a dialog or dropdown, because they should close when a user clicks outside of them. So we need a way to find out about this outside click. Much of what you will…
A neat custom React Hook that I used in some of my React freelance projects which detects the scroll direction of a user: In a function component , the custom React hook can be used this way: That's it. There may be many ways to improve this custom hook (e.g. check the horizontal instead of the vertical scroll direction), but for my cases it…
Everyone who is new to React is confused by React props , because they are never mentioned in any other framework, and rarely explained on their own. They are one of the early things you will learn in React after grasping React's JSX syntax. Essentially React component props are used to pass data from component to component. In this tutorial, I…
In this tutorial, I want to show you how to use React Table Library with a fixed column . In the previous example, you installed React Table Library to create a table component and gave it a theme. Now, you will enable your users to make a column sticky to the side: The columns are fixed to the left side. You can fix columns in the same way to…
A React tutorial about event bubbling and capturing. Most JavaScript developers may be already familiar with this topic, because it origins in JavaScript and its DOM API. However, in this article, I want to give some of guidance for event bubbling and capturing in React . An event handler in React can be used to listen to a specific event (e.g. on…
A neat custom React Hook that I used in some of my React freelance projects which checks if an element's content has overflow (here: vertical overflow): If you want to detect a horizontal overflow instead, you can exchange the hasOverflow assignment to the following: In a function component , the custom React hook can be used this way: The…
A short React tutorial by example for beginners about using a radio button in React. First of all, a radio button is just an HTML input field with the type of radio which can be rendered in React's JSX: What may be missing is an associated label to signal the user what value is changed with this radio button: In your browser, this radio button can…
When using React Router in React, one can use the Navigate component to navigate a user away from a page in case of a certain condition. For example, the following example does not render a list if there is no data, but redirects a user to the home page instead: In this case the redirect is well placed. However, if there is much logic happening…
A brief tutorial on how to generate an image (JPG or PNG) from a React component . Use case: Sometimes when you have a React project, you want to give users the ability to download an area of your application as image. For example, when you display charts based on data, a user should be able to export the chart as image. In this React tutorial, I…
