An intelligent React component to obfuscate any contact link!

How it works

The user passes the contact link as an email, tel, sms, or facetime prop. The component obfuscates href data until an onClick event. Links are given their proper URL schemes (mailto, facetime, etc.) The link is rendered in reverse in the dom, but reversed again with css. This making the link useless for spammers, but user friendly on screen.


The world needs obfuscated links that display the link in a friendly way.


npm install --save react-obfuscate


import React from 'react'
import Obfuscate from 'react-obfuscate'

export default () => (
    Phone: <Obfuscate tel="205-454-1234" />
    <br />
    Email:{' '}
      email="[email protected]"
        subject: 'Question from the website',
        cc: '[email protected]',


Robot Interaction

  Phone: <a href="obfuscated" style="direction: rtl; unicode-bidi: bidi-override;">4321-454-502</a><br>
  Email: <a href="obfuscated" style="direction: rtl; unicode-bidi: bidi-override;">[email protected]</a>

Human Interaction

  Phone: <a href="tel:205-454-1234">205-454-1234</a><br>
  Email: <a href="mailto:[email protected]&subject=Question%20from%20the%20website&[email protected]">[email protected]</a>


Prop Type Argument Default Description
email string <optional> null email address of the intended recipient
tel string <optional> null telephone number of the intended recipient
sms string <optional> null sms number of the intended recipient
facetime string <optional> null facetime address of the intended recipient
headers object <optional> null subject, cc, bcc, body, etc
obfuscate boolean <optional> true set to false to disable obfuscation
linkText string <optional> obfuscated add custom obfuscated link text, like 'Email Me'


npm run build