Posts tagged "React Hooks"

Published: March 30 2023

React Router v6 - Redirect with Navigate and useNavigate

A quick post on how to redirect with React Router v6 using the Navigate component and useNavigate hook.
Published: February 24 2023

React Router v6 - Catch All (Default) Redirect in React

A super quick post to show how to create a catch all (default) redirect to the home page in a React app using React Router v6.
Published: February 22 2023

React Router v6 - Listen to location (route) change without history.listen

How to detect route changes with React Router v6 to execute code on location change in a React app.
Published: February 21 2023

React + Axios - Add Bearer Token Authorization Header to HTTP Request

A quick example of how to add a Bearer Token Authorization Header to an HTTP request in React with Axios
Published: February 16 2023

React + Fetch - Add Bearer Token Authorization Header to HTTP Request

A quick example of how to add a Bearer Token Authorization Header to an HTTP request in React with Fetch
Published: February 07 2023

React Hook Form 7 - Date Validation Example in React

This is a quick example of how to validate a date input field in React with React Hook Form.
Published: February 07 2023

React Hook Form 7 - Email Validation Example

This is a quick example of how to validate an email input field in React with React Hook Form.
Published: October 07 2021

React - history listen and unlisten with React Router v5

How to register and unregister a location change listener in a React component with React Router v5.
Published: October 05 2021

React Hook Form 7 - Dynamic Form Example with useFieldArray

This is a quick example of how to build a dynamic form with validation in React with version 7 of the React Hook Form library.
Published: September 27 2021

React + Fetch - Logout on 401 Unauthorized or 403 Forbidden HTTP Response

A quick example of how to automatically logout of a React app if a fetch request returns a 401 Unauthorized or 403 Forbidden response
Published: September 25 2021

React + Axios - Interceptor to Set Auth Header for API Requests if User Logged In

A quick example of how to automatically set the HTTP Authorization header for axios requests from React to an API when the user is authenticated
Published: September 23 2021

React Hook Form - Reset form with default values and clear errors

An example of how to reset a React Hook Form with default values and clear form validation error messages.
Published: September 19 2021

React Hook Form - Set form values in useEffect hook after async data load

A quick example of how to set field values in a React Hook Form after loading data asynchronously (e.g. from an API request) with a useEffect hook
Published: September 17 2021

React + Fetch - Set Authorization Header for API Requests if User Logged In

A quick example of how to automatically set the HTTP Authorization header for fetch requests from React to an API when the user is authenticated.
Published: September 16 2021

React + Recoil - User Registration and Login Example & Tutorial

Tutorial on how to implement user registration, login and CRUD functionality with React and Recoil, including a live demo application and example back-end APIs built with Node.js and .NET.
Published: September 15 2021

React Hook Form - Password and Confirm Password Match Validation Example

An example of how to validate that a password and confirm password field match in React using the React Hook Form library
Published: September 13 2021

React Hook Form - Display custom error message returned from API request

A quick example of how to display a custom error message on a React Hook Form that is returned from an HTTP API request
Published: September 12 2021

React Hook Form - Submitting (Loading) Spinner Example

A quick example of how to display a loading spinner while a form is submitting with the React Hook Form library.
Published: September 11 2021

React + Recoil - Basic HTTP Authentication Tutorial & Example

This tutorial shows how to build a simple login application with React and Recoil that uses Basic HTTP authentication.
Published: September 10 2021

React + Recoil - Set atom state after async HTTP GET or POST request

A quick example of how to set Recoil state after an async HTTP request to an API
Published: September 09 2021

React - Redirect to Login Page if Unauthenticated

A quick post to show how to redirect unauthenticated users to the login page in a React app.
Published: September 08 2021

React - Catch All (Default) Redirect with React Router 5

A super quick post to show how to create a catch all (default) redirect to the home page in a React app that uses React Router v5.
Published: September 07 2021

React + Recoil - JWT Authentication Tutorial & Example

This tutorial shows how to build a simple login application with React and Recoil that uses JWT authentication.
Published: September 04 2021

Next.js - Required Checkbox Example with React Hook Form

This is a quick example of how to implement a required checkbox field in Next.js the React Hook Form library.
Published: September 03 2021

Next.js - Form Validation Example with React Hook Form

This is a quick example of how to setup form validation in Next.js with the React Hook Form library.
Published: August 31 2021

Next.js - Combined Add/Edit (Create/Update) Form Example

This is a quick example of how to build a form in Next.js with the React Hook Form library that supports both create and update modes.
Published: August 30 2021

Next.js - Redirect to Login Page if Unauthenticated

A quick post to show how to redirect users to the login page in a Next.js front-end (React) app.
Published: August 29 2021

Next.js - Basic HTTP Authentication Tutorial with Example App

How to build a simple full stack login application in Next.js that uses Basic HTTP Authentication.
Published: August 27 2021

React - How to Check if a Component is Mounted or Unmounted

This is a quick post to show how to track the mounted status of a React component so you can check if it's mounted or unmounted before performing certain actions.
Published: August 26 2021

Next.js - Alert (Toaster) Notifications

A tutorial and example showing how to implement alert / toaster notifications in Next.js.
Published: August 19 2021
Last updated: March 31 2023

Next.js 11 - User Registration and Login Tutorial with Example App

In this tutorial we'll go through an example of how to build a simple user registration, login and user management (CRUD) application with Next.js.
Published: August 04 2021

Next.js 11 - JWT Authentication Tutorial with Example App

This tutorial shows how to build a simple full stack login application in Next.js that uses JWT authentication.
Published: June 01 2021

Next.js - NavLink Component Example with Active CSS Class

This is a quick post to show how to create a custom NavLink component in Next.js that extends the built-in Link component to add the CSS className "active" when the href attribute matches the current URL.
Published: May 31 2021

Next.js - Make the Link component work like React Router Link

How to create a custom Link component that wraps the built-in Next.js link component to make it work more like the standard link component from React Router.
Published: April 29 2021

React Hook Form 7 - Required Checkbox Example

This is a quick example of how to implement a required checkbox field in React with version 7 the React Hook Form library.
Published: April 23 2021

React + Axios - HTTP DELETE Request Examples

A quick set of examples to show how to send HTTP DELETE requests from React to a backend API using axios
Published: April 22 2021

React + Axios - HTTP PUT Request Examples

A quick set of examples to show how to send HTTP PUT requests from React to a backend API using axios
Published: April 21 2021

React Hook Form 7 - Form Validation Example

This is a quick example of how to setup form validation in React with version 7 of the React Hook Form library.
Published: April 20 2021

Next.js 10 - CRUD Example with React Hook Form

This tutorial shows how to build a basic Next.js CRUD application with the React Hook Form library that includes pages that list, add, edit and delete records using Next.js API routes.
Published: November 11 2020

React + Fetch - HTTP DELETE Request Examples

A quick set of examples to show how to send HTTP DELETE requests from React to a backend API using fetch()
Published: November 02 2020

React + Fetch - HTTP PUT Request Examples

A quick set of examples to show how to send HTTP PUT requests from React to a backend API using fetch()
Published: October 25 2020

React - Facebook Login Tutorial & Example

How to implement Facebook Login in React with an example app that allows you to login with Facebook and view/update/delete accounts registered in the React app.
Published: October 14 2020

React Hook Form - Combined Add/Edit (Create/Update) Form Example

This is a quick example of how to build a form in React with the React Hook Form library that supports both create and update modes.
Published: October 09 2020
Last updated: November 22 2021

React - CRUD Example with React Hook Form

This tutorial shows how to build a basic React CRUD application with the React Hook Form library that includes pages for listing, adding, editing and deleting records from a JSON API.
Published: October 05 2020

React - Required Checkbox Example with React Hook Form

This is a quick example of how to implement a required checkbox field in React with the React Hook Form library.
Published: October 04 2020

React - Form Validation Example with React Hook Form

This is a quick example of how to setup form validation in React with the React Hook Form library.
Published: September 29 2020

React - Dynamic Form Example with React Hook Form

This is a quick example of how to build a dynamic form with validation in React with the React Hook Form library.
Published: September 13 2020

React - Display a list of items

This is a quick example to show how to display a list of items in React.
Published: July 17 2020

React + Axios - HTTP POST Request Examples

A quick set of examples to show how to send HTTP POST requests from React to a backend API using axios
Published: July 17 2020

React + Axios - HTTP GET Request Examples

A quick set of examples to show how to send HTTP GET requests from React to a backend API using axios
Published: April 22 2020
Last updated: July 06 2020

React Boilerplate - Email Sign Up with Verification, Authentication & Forgot Password

How to build a boilerplate authentication system in React including email sign up & verification, authentication & role based authorization, forgot password & reset password functionality, view & update my profile section, and admin only section for managing all user accounts.
Published: April 21 2020

React Hooks + RxJS - Communicating Between Components with Observable & Subject

A quick example of how to communicate between React Hooks components using RxJS Observable and Subject.
Published: April 20 2020

React + Formik - Combined Add/Edit (Create/Update) Form Example

This is a quick example of how to build a form in React with the Formik library that supports both create and update modes.
Published: April 17 2020

React + Formik - Master Details CRUD Example

This tutorial shows how to build a basic React CRUD application with Formik that includes master and detail views for listing, adding, editing and deleting records from a JSON API.
Published: April 11 2020

React Hooks + Bootstrap - Alert Notifications

This tutorial shows how to implement a simple reusable alert component using React Hooks, Bootstrap CSS and RxJS.
Published: March 26 2020

React Router - Relative Links Example

This is a quick example of how to navigate up levels with relative links using the React Router Link component.
Published: March 23 2020

React Router - Remove Trailing Slash from URLs

This is a super quick example of how to remove trailing slashes from URLs in React apps that use React Router.
Published: March 02 2020
Last updated: August 31 2020

React Hooks + Redux - User Registration and Login Tutorial & Example

Tutorial on how to implement user registration and login functionality with React Hooks and Redux, including a boilerplate demo application and video on how to deploy to AWS.
Published: February 01 2020
Last updated: April 22 2021

React + Fetch - HTTP POST Request Examples

A quick set of examples to show how to send HTTP POST requests from React to a backend API using fetch()
Published: January 27 2020
Last updated: May 12 2020

React + Fetch - HTTP GET Request Examples

A quick set of examples to show how to send HTTP GET requests from React to a backend API using fetch()
Supported by