[](https://www.npmjs.com/package/react-obfuscate-email) [](https://github.com/Mauric
npm install 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 #.
``sh`
npm install --save react-obfuscate-email
`js
import { Email } from "react-obfuscate-email";
export default function SomeComponent() {
return
}
`
Inspect the element without hovering or focusing on it to see what's actually rendered:
`jsx`
body="You rock!"
subject="Hi 👋"
cc={["cc1@example.com", "cc2@example.com"]}
bcc={["bcc@example.com"]}
>
📧 Click me!
You can pass any children to control the displayed text of the link:
`jsx`
You can pass any valid a tag attributes, like target or title:
`jsx``
title="📧 Email me!"
target="_blank"
rel="noopener noreferrer"
>
📧 Email me!
| 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
The component is written in TypeScript and type definitions are included.
Give a ⭐️ if you like this project!