react-obfuscate

react-obfuscate

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.

Why

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

Usage

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='[e-mail]' 
      headers={
        {subject:'Question from the website'},
        {cc:'[e-mail]'}
      }/>
  </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;">looc.notsoc@olleh</a>
</p>

Human Interaction

<p>
  Phone: <a href="tel:[phone]">205-454-1234</a><br>
  Email: <a href="mailto:[e-mail]&subject=Question%20from%20the%20website&cc=[e-mail]">[e-mail]</a>
</p>

Options

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 if you would like

Development

npm run build

Contributing

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

To Do

• Write some good tests
• Convert clipboard text left to right

License

Licensed under the MIT license.