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