Reduce user-misspelled Emails In Your Forms With React JS

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 it’s reduced their email bounces by 50%. Today I will take you through how you can add this feature to your signup forms.

Download the source code of this project on Github.

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

Setting up the folder structure

Note: If you have knowledge on setting up webpack and react copy the app.jsx and styles.scss and install react-mailcheck.

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 adapt the whole setup or include what you find necessary.

Now add the following scripts to your package.json

package.json

webpack.config.js

There are a few reasons why I use this same configuration for all y React projects. All CSS files that are imported in your .jsx files are combined and bundled into one .css file. There will be no Internal style sheets in your project.

Disadvantages of Internal CSS: Increased page loading time. It affects only one page — not useful if you want to use the same CSS on multiple documents.

Now add the following scripts to your webpack.config.json

tsconfig.json

The tsconfig.json file specifies the root files and the compiler options required to compile the project. To read more click here.

tslint.json

TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.

Now add the following scripts to your tslint.json

index.html

This is where we render our main react component. We are importing a third-party font (Source Sans Pro)from google and linking to our bundled files: bundle.css and bundle.js

app.jsx

Now add the below code in your app.jsx file.

Whoa! What does this code do?

Don’t worry, the code won’t bite! Let me explain it to you now.

We’ll start from state. Our email input uses state as the source of truth for the field value. This means that the email input element will take state value as its value.

this.state = {  email: '',};

State value is then assigned into the email input value prop. We also add an onChange prop that will run every time the email is changed.

The last part of this app is the mail check. In this example, we used a handleClickMailCheck method that simply accepts the suggestion argument. We then make the suggestion as the new value of our email field.

handleClickMailcheck = suggestion => {
   this.setState({
        email: suggestion.full
   });
}

suggestion — The suggestion object passed back to you, or null if mailcheck has nothing to suggest. The suggestion object has the following members:

{
     address: 'test',        // the address; part before the @ sign
     domain: 'gmail.com',    // the suggested domain
     full: 'test@gmail.com'  // the full suggested email
}

styles.scss

Now let’s add some styling to our app by adding these scripts in our styles.scss.

Now open the index.html file in your browser and you’ll see a centered input similar to the one below.

Now test our app with valid and invalid email domain eg user@gnail.com instead of user@gmial.com. This is how it’s supposed to display when you enter an invalid email domain.

And that’s it guys for today. Thanks for reading! If you love articles like this, be sure to leave a comment and share it on social media 🙂 Happy Coding!