React: Show Image Preview before Uploading

July 28, 2021 A Goodman

This article walks you through a complete example of display an image preview before uploading. We are going to use React hooks and pure Javascript. No third-party packages are necessary. The Example Preview The React app…

React Router Dom: Parsing Query String Parameters

July 28, 2021 A Goodman

If your React web application uses React Router for navigation and routing, you use the useLocation hook to get the location object that represents the current URL. Once you have the location object, you can retrieve…

Next.js: Parsing Query String Parameters

July 26, 2021 A Goodman

In Next.js, you can get the query string parameters of a URL by using the useRouter hook, like this: Example Let’s say you have a products page with the following code: Now when you go to:…

React Router Dom: Scroll To Top on Route Change

June 30, 2021 A Goodman

If you are using React Router Dom for navigation and routing in your React app then you will have to handle scroll restoration on your own because the library no longer ships default scroll management (it…

2 Ways to Render HTML Content in React and JSX

June 30, 2021 A Goodman

There might be times where you need to render HTML content in a single-page app made with React. For instance, you have a blog or a news website that uses React for the frontend and use…

2 Ways to Set Page TItle Dynamically in React

June 29, 2021 A Goodman

This article shows you 2 approaches to programmatically change the page title in a React web app. We will go through 2 examples: the first one uses self-written code and the second one uses a third-party…

How to Create a Scroll To Top Button in React

June 29, 2021 A Goodman

For long web pages with a lot of content, a back-to-top button will be very useful. This button will make it easy and convenient for the user to return to the top of the page once…

React + TypeScript: Handling onFocus and onBlur events

August 5, 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…

1 2 3 4 5 7