React Obfuscate Email

📧🚫🤖 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 #.

Installation

npm install --save react-obfuscate-email

Usage

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

export default function SomeComponent() {
  return <Email email="[email protected]">📧 Email me!</Email>;
}

Examples

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

<Email
  email="[email protected]"
  body="You rock!"
  subject="Hi 👋"
  cc={["[email protected]", "[email protected]"]}
  bcc={["[email protected]"]}
>
  📧 Click me!
</Email>

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

<Email email="[email protected]">📧 Click me!</Email>

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

<Email
  email="[email protected]"
  title="📧 Email me!"
  target="_blank"
  rel="noopener noreferrer"
>
  📧 Email me!
</Email>

Props

Name	Type	Required	Default	Description
email	string	Yes	—	E-mail recipient address
children	ReactNode	No	email	Content to display in the link
subject	string	No	""	Subject of e-mail
body	string	No	""	Body of e-mail
cc	string[]	No	[]	Carbon copy e-mail addresses
bcc	string[]	No	[]	Blind carbon copy e-mail addresses
...props	AnchorHTMLAttributes	No	—	Any valid tag attribute (e.g. target, rel, title)

TypeScript

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

License

MIT

Show your support

Give a ⭐️ if you like this project!

LICENSE

MIT