An easy way to hide an email from bots with react.

I think that it's important to protect your email address from webcrawlers.

Some companies use contact us forms, some freelance developers put the email address in the form of "contact me at foobar @ gmail dot com" or something like that.

This is a fun way to retrieve an email address from a static react site by leveraging lazy loading. It's a pretty simple concept: lazy load a component containing the email address based on a trigger (in this case a button click).

The code:

import * as React from "react";

export interface IContactMeHrefProps {}

export const ContactMeHref: React.FC<IContactMeHrefProps> = props => {
  return (
    <div>
      <a href="mailto:[e-mail]">
        [e-mail]
      </a>
    </div>
  );
};

export default ContactMeHref;

import * as React from "react";
const ContactMeHref = React.lazy(() => import("../resume/Contact"));

export interface IContactMeGateProps {}

// Make user click a button to show email adderss via lazy loading
export const ContactMeGate: React.FC<IContactMeGateProps> = props => {
  const [showingEmail, setShowingEmail] = React.useState(false);

  let email = showingEmail ? (
    <ContactMeHref />
  ) : (
    <button
      onClick={() => setShowingEmail(true)}
    >
      Click for contact info
    </button>
  );
  return (
    <React.Suspense fallback={<div>loading...</div>}>
      <div>
        {email}
      </div>
    </React.Suspense>
  );
};

export default ContactMeGate;

You can find an example of it on my website at hkievet.com.

Comments

[Tobias SN]

I would recommend hiding it behind a CAPTCHA just to be safe.

[Ante]

This is a clever solution - thank you. Introducing captcha for a tiny use case like this might be overkill.