react-obfuscate-email

React Obfuscate Email

📧 React component to obfuscate email links.

Usage

npm install react-obfuscate-email --save

Import Email component:

import { Email } from "react-obfuscate-email";

Examples

<Email email="[e-mail]">📧 Email me!</Email>

Will render:

<a href="#">📧 Email me!</a>

The href attribute is set to a # making it useless for bots scraping for emails.

Once the user interacts with it by hovering over it or focusing on it, it will properly set the href attribute:

<a href="mailto:[e-mail]">📧 Email me!</a>

If no children is given, it will use the email as the displayed text for the link:

<Email email="[e-mail]" />

In this case the '@' symbol is stripped out and is displayed using css ::after pseudo-element, so the content of the link will actually be testexample.com, making it useless for bots:

<a href="#">test<span class="roe"><span>example.com</a>

Once the user interacts with the element, it will be properly replaced with:

<a href="mailto:[e-mail]">[e-mail]</a>

The component also accepts body and subject props that will be properly encoded for the link:

<Email email="[e-mail]" body="You rock!" subject="Hello 👋" />

Will properly produce [e-mail]?body=You%20rock!&subject=Hello%20%F0%9F%91%8B as the href attribute once human interaction is detected (notice spaces are percent encoded instead of being replaced with '+').

You can also include the _target attribute (or any other a attribute):

<Email
  email="[e-mail]"
  body="You rock!"
  subject="Hello 👋"
  title="Email me!"
  target="_blank"
  rel="noopener noreferrer"
>
  Email me!
</Email>

Will render:

<a href="#" title="Email me!" target="_blank" rel="noopener noreferrer"
  >Email me!</a
>

The href attribute will be properly replaced once human interaction is detected.

TypeScript

The component is written in TypeScript and type definitions are included.

LICENSE

MIT