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="test@example.com">📧 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:test@example.com">📧 Email me!</a>
If no children is given, it will use the email as the displayed text for the link:
<Email email="test@example.com" />
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:test@example.com">test@example.com</a>
The component also accepts body
and subject
props that will be properly encoded for the link:
<Email email="test@example.com" body="You rock!" subject="Hello 👋" />
Will properly produce test@example.com?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="test@example.com"
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