Skip to content
An intelligent React component to obfuscate any contact link!
Branch: master
Clone or download
Latest commit 4f5aa2a Mar 21, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Added onClick prop and updated tests Feb 21, 2019
.babelrc Update to babel 7 Jan 23, 2019
package.json 3.2.1 Mar 21, 2019


npm version npm code style: prettier


Demo & Examples

Live demo:

How it works

The user passes the contact link as an email, tel, sms, or facetime prop. The component obfuscates href data until a hover, click, or focus 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:{' '}
        cc: '',
        bcc: '',
        subject: 'react-obfuscate',
        body: 'Down with the machines!'


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;">looc.notsoc@olleh</a>

Human Interaction

  Phone: <a href="tel:205-454-1234">205-454-1234</a><br>
  Email: <a href=""></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 pre-interaction href attribute placeholder text
element string <optional> 'a' custom element to render instead of an a tag
onClick function <optional> null called prior to setting location (e.g. for analytics tracking)


npm run dev

Consecutive Obfuscate/inline elements

react-obfuscate is an inline element. Using consecutive inline elements inside a block element causes an issue with the bidi-override reversal on Chrome. To prevent this, add any text between the elements, wrap <Obfuscate/> with another element (like <span>), or add style={{display:'inline-block'}} to prevent any issues.

Example Case:

	<Obfuscate style={{display:'inline-block'}} email="" />
	<br />
	<Obfuscate style={{display:'inline-block'}} tel="+69 111 222 333" />

Obfuscating custom elements with the element prop

With the element prop, users can obfuscate any element, like paragraphs or headers. Changing the dom element also removes the href and onClick props. Custom styling is required due to handling of right-to-left direction styles. Usually, adding style={{textAlign:'left'}} will suffice.

Example Case:

  This paragraph is more secret than others.


react-obfuscate is awesome thanks to these community members:


Please help make this react component better. Submit any issue and/or make a pull request!


Licensed under the MIT license.

You can’t perform that action at this time.