Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-obfuscate with all npm packages installed. Try it out:

var reactObfuscate = require("react-obfuscate")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-obfuscate v3.6.2

An intelligent React component to obfuscate any contact link

react-obfuscate

Coverage Status Build Status Greenkeeper badge npm version npm code style: prettier

react-obfuscate

Demo & Examples

Live demo: react-obfuscate.coston.io

How it works

The user passes the contact link as an email, tel, sms, facetime, or href 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.

Why

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

Installation

npm install --save react-obfuscate

Input

import React from "react";
import Obfuscate from "react-obfuscate";

export default () => (
  <p>
    Phone: <Obfuscate tel="205-454-1234" />
    <br />
    Email:{" "}
    <Obfuscate
      email="hello@coston.io"
      headers={{
        cc: "dade@zero-cool.af",
        bcc: "smith@machina.net",
        subject: "react-obfuscate",
        body: "Down with the machines!"
      }}
    />
  </p>
);

Output

Robot Interaction

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

Human Interaction

<p>
  Phone: <a href="tel:205-454-1234">205-454-1234</a><br>
  Email: <a href="mailto:hello@coston.io?cc=kate%40acidburn.af&amp;bcc=tanderson%40metacortex.net&amp;subject=react-obfuscate&amp;body=Down%20with%20the%20machines!">hello@coston.io</a>
</p>

Common Options

PropTypeDefaultDescription
emailstringnullemail address of the intended recipient
headersobjectnullsubject, cc, bcc, body, etc
telstringnulltelephone number of the intended recipient
smsstringnullsms number of the intended recipient
facetimestringnullfacetime address of the intended recipient
hrefstringnullObfuscate any other URL type (e.g. WhatsApp)

Uncommon Options

PropTypeDefaultDescription
linkTextstring'obfuscated'add custom pre-interaction href attribute placeholder text
obfuscatebooleantrueset to false to disable obfuscation
obfuscateChildrenbooleantrueset to false to disable obfuscation of children
elementstring'a'use if you want to override the default a tag
onClickfunctionnullcalled prior to setting location (e.g. for analytics tracking)

Development

npm start

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:

<address>
  <Obfuscate style={{ display: "inline-block" }} email="-mail@mailbox.org" />
  <br />
  <Obfuscate style={{ display: "inline-block" }} tel="+69 111 222 333" />
</address>

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:

<Obfuscate element="p" style={{ textAlign: "left" }}>
  This paragraph is more secret than others.
</Obfuscate>

Contributors

react-obfuscate is awesome thanks to these community members:

Contributing

Please help make this react component better. Feel free to submit an issue, or contribute through a pull request.

License

Licensed under the MIT license.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free