DEV Community

hkievet
hkievet

Posted on

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

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:foobary@gmail.com">
        foobar@gmail.com
      </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.

Top comments (3)

Collapse
 
tobiassn profile image
Tobias SN

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

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
azivkovi profile image
Ante

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