React + TypeScript: Handling onFocus and onBlur events

June 20, 2021 A Goodman

This article walks you through a complete example of handling the onFocus and the onBlur events in a React project that is written in TypeScript. We are going to use modern React features like hooks and…

React: Passing Parameters to Event Handler Functions

June 20, 2021 A Goodman

React supports a lot of events and the names that you can hardly not know are onClick, onChange, onSubmit, onReset, onContextMenu, onDrag, onMouseOver, etc. This article shows you how to pass parameters to an event handler…

React + TypeScript: Drag and Drop Example

June 19, 2021 A Goodman

This article walks you through a complete example of implementing drag and drop in a React application that uses TypeScript. We are going to write code from scratch and not using any third-party packages. Example In…

React: Copy to Clipboard When Click a Button/Link

June 14, 2021 The Plumber

This article shows you how to copy some text to the clipboard when a user clicks a certain button or link in your React application. We are going to walk through 2 complete examples corresponding to…

Next.js: Disable Server-Side Rendering on Specific Pages

June 12, 2021 A Goodman

There may be cases where you want to disable server-side rendering (SSR) on one or some specific pages of your Next.js application, such as you get some warnings or errors when using a third-party library due…

5 best open-source WYSIWYG editors for React (2021)

June 12, 2021 Guest Contributor

This article walks you through a list of the most popular open-source WYSIWYG (What You See Is What You Get or Rich Text) editors for React. Their order is based on the number of stars they…

React: Firebase App named ‘[DEFAULT]’ already exists

June 11, 2021 The Frog

When developing a React application with the Firebase package, I ran into the following error: More information I got from my console: If you face the same error as mine, don’t worry. The reason why the…

React + Material-UI: Create Dark/Light Theme Toggle

May 24, 2021 A Goodman

Modern web apps often have both a light theme and a dark theme so that users can choose what works best for them. The light theme is suitable for daytime use, while the dark theme is…

React + TypeScript: Handling form onSubmit event

April 12, 2021 The Frog

The example below shows you how to handle the form onSubmit event in React with TypeScript. We will use the new things including functional components and hooks and not use class-based components. Example Preview Our sample…

React & TypeScript: Using useRef hook example

June 18, 2021 A Goodman

The example below shows you how to properly use the useRef hook with TypeScript in React. This task may sound simple but it can be challenging for people who aren’t familiar with types and functional components….

React + TypeScript: Handling input onChange event (2021)

April 7, 2021 The Plumber

This tutorial is intended for developers who are new to React or looking to transition from using Javascript to TypeScript. We will build a simple app with functional components and hooks to demonstrate how to handle…

How to create a Filter/Search List in React (2021)

April 5, 2021 A Goodman

This article walks you through a complete example of making a filter (searchable) list in React. We’ll use the most recent version of React (17.0.2) as well as use functional components and hooks. The Example Let’s…

1 2 3 4