Reduce user-misspelled Emails In Your Forms With React JS

Reduce user-misspelled email addresses in your forms by suggesting the right domain when your users misspell it in an email address.

I have just launched DavisonPro.dev. A standalone blog where I write about Javascript, Web development and software development.

I recently stumbled across react-mailcheck, a React Component from the mailcheck library that suggests domains based on common typos in email forms. For example, ‘user@gnail.co’ will generate a suggestion for ‘user@gmail.com’. It’s perfect for preventing errors in user signups, and the authors claim its reduced their email bounces by 50%. Today I will take you through how you can add this feature to your signup forms.

Without further ado, let’s get on with the set up!

Download the source code of this project on Github.

Setting up the folder structure

npm install --save react-mailcheck

Here is the folder structure we will be left with after the dust settles: