react-protected-mailto

react-protected-mailto

Fork of react-obfuscated that went it's own way.

• react-protected-mailto
  • How it works
  • Why
  • Installation
    • Input
    • Output
      • Robot Interaction
      • Human Interaction
  • Options
  • Development
  • Contributors
  • Contributing
    • To Do
  • License

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.

Installation

npm install --save react-protected-mailto

Input

import React from 'react'
import Mailto from 'react-protected-mailto'

export default () => (
  <p>
    Phone: <Mailto tel='205-454-1234' /><br />
    Email: <Mailto
      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 to disable obfuscation obfuscatedHref | string | <optional> | click-to-open | text to put in a href

Development

npm run build

Contributors

react-protected-mailto is awesome thanks to these community members:

• coston
• bostrom
• viktorbezdek

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.