Creating a Custom React Hook for Password Validation.

Steven Creates
8 min readNov 16, 2020

In this guide we will walk through creating a custom react hook to validate passwords. Validating length, uppercase, lowercase, number, special character and matches a second password.

Photo by Derek Oyen on Unsplash

Index:

  • Follow Along
  • Quick Start (scroll to end of first section)
  • Extra (Making the component more customizable and advanced)
  • Advance Customization Quick Start (scroll to bottom)

Follow Along

We are going to be creating a custom hook that you can use to validate your passwords with the following.

  • Minimum Amount of Characters
  • Uppercase
  • Lowercase
  • Includes Number
  • Includes Special Character
  • Both passwords match

The custom hook will all be build without any 3rd party packages and will only be using vanilla react and vanilla javascript.

We will also be displaying our validation through the app. Which makes it super simple to add this to your app and make it prettier for full on production.

Thank you for reading, feel free to clap and provide any feedback you have.

--

--

Steven Creates

Software Engineer with 7+ years of hands-on experience designing, developing, and implementing. Focusing on React + Animations + TypeScript + Storybookjs