📧🚫🤖 Lightweight email obfuscator React component.

Until you hover or focus on the link, the @ symbol is stripped out and rendered using ::after css pseudo-element, and the href attribute value is replaced with #.

npm install --save react-obfuscate-email

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

export default function SomeComponent() {
  return <Email email="test@example.com">📧 Email me!</Email>;
}

Inspect the element without hovering or focusing on it to see what's actually rendered:

<Email
  email="cick@me.com"
  body="You rock!"
  subject="Hi 👋"
  cc={["cc1@example.com", "cc2@example.com"]}
  bcc={["bcc@example.com"]}
>
  📧 Click me!
</Email>

You can pass any children to control the displayed text of the link:

<Email email="cick@me.com">📧 Click me!</Email>

You can pass any valid a tag attributes, like target or title:

<Email
  email="cick@me.com"
  title="📧 Email me!"
  target="_blank"
  rel="noopener noreferrer"
>
  📧 Email me!
</Email>

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

MIT

Give a ⭐️ if you like this project!

MIT