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:

Create a new project and create all the files and folders above.

The project has two main folders: app and bundles. The app folder contains app.jsx and styles.scss. The bundles folder will contain our bundled files that are generated by webpack.All the other files ( index.html, package.json, tsconfig.json, tslint.json, webpack.config.json) are located in the root folder of our project.

I use a similar setup for all my projects. You can adopt the whole setup or include what you find necessary.

Now add the following scripts to your package.json

package.json