React + TypeScript: Re-render a Component on Window Resize

September 17, 2021 A Goodman

This article shows you how to re-render a React component when the window (the document view) gets resized. We’ll cover the basics and then build a complete example with modern things like hooks, functional components, and…

React: Get the Width & Height of a dynamic Element

September 15, 2021 A Goodman

This article shows you how to determine the width and height of a non-fixed-size component in React. We’ll use new features of React, including hooks and functional components. You won’t see old-fashioned stuff like class-based components…

React + TypeScript: Handling onScroll event

September 13, 2021 A Goodman

Introduction The onScroll event occurs when an element’s scrollbar is being scrolled. This article walks you through an end-to-end example of handling the onScroll event in a React application. We’ll use TypeScript and modern features of…

React + TypeScript: Handle onCopy, onCut, and onPaste events

September 9, 2021 A Goodman

This article is about the onCopy, onCut, and onPaste events in React and TypeScript. We’ll cover the fundamentals of these three events then examine a complete example of using them in practice. Overview The onCopy event…

React + TypeScript: Working with Radio Button Groups

September 9, 2021 A Goodman

The end-to-end example below covers the most important aspects you need to know when working with radio button groups in a React application written in TypeScript. We will write code from scratch and use the modern…

React + TypeScript: Making a Custom Context Menu

September 7, 2021 A Goodman

This article walks you through an end-to-end example of creating a custom context menu in a React app that is written in TypeScript. We’ll use new features of React like hooks and functional components. You won’t…

React + TypeScript: Multiple Select example

August 31, 2021 A Goodman

The example below describes how to use a multiple select in a React project written in TypeScript. You will learn to get the selected values as well as display them on the screen. Everything will be…

How to Correctly Use Bootstrap 5 in Next.js

August 31, 2021 A Goodman

This article shows you how to correctly use Bootstrap 5 in a Next.js project. By the end of this article, we will be able to: Use all CSS classes provided by Bootstrap 5 whereever you want….

How to Use Bootstrap 5 and Bootstrap Icons in React

August 31, 2021 A Goodman

This article shows you a couple of different ways to use Bootstrap 5 (the latest version of Bootstrap) and Bootstrap icons in a React project. Using Bootstrap Official Packages 1. To use Bootstrap 5, you can…

React + TypeScript: onMouseOver & onMouseOut events

August 26, 2021 A Goodman

This article is about the onMouseOver and onMouseOut events in a React project written in TypeScript. We’ll go through the fundamentals of these events then examine a complete example of using them in practice. Overview The…

React + TypeScript: Image onLoad & onError Events

August 18, 2021 A Goodman

The end-to-end example below shows you how to handle image events in a React app that uses TypeScript. There are 2 events that we are going to work with: onLoad: This event occurs when an image…

React + TypeScript: Handling onClick event

August 17, 2021 A Goodman

The onClick event occurs when an element is clicked. This element can be a button, a div element, an image, etc. This article walks you through a couple of different examples of handling the onClick event…

1 2 3 6