react-obfuscate ☁️

Try Me

Inspect and click these robot-resistant, user friendly, contact links

Live Code

<ul>
  <li>
    Telephone:
    <Obfuscate tel="(202) 224-5744" />
  </li>

  <li>
    Email:
    <Obfuscate
      email="hello@coston.io"
      headers={{
        cc: 'kate@acidburn.af',
        bcc: 'tanderson@metacortex.net',
        subject: 'react-obfuscate',
        body: 'Down with the machines!'
      }}
    />
  </li>

  <li>
    SMS:
    <Obfuscate sms="+1 (202) 224-5744" />
  </li>

  <li>
    Facetime:
    <Obfuscate facetime="202.224.5744" />
  </li>

  <li>
    Any other URL:
    <Obfuscate href="https://wa.me/15551234567">
      Chat On WhatsApp
    </Obfuscate>
  </li>

  <li>
    Child Elements:
    <Obfuscate email="hello@coston.io" aria-label="Email Me">
      <svg width={24} height={21}>
        <path
          fill="#000"
          d="M12 12.713L.0 3h23.97L12 12.713zm0 2.574L0 5.562V21h24V5"
        />
      </svg>
    </Obfuscate>
  </li>
</ul>

How It Works

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

Install

npm install react-obfuscate --save

Github

View documentation on GitHub