Inspect and click these robot-resistant, user friendly, contact links
<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>
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.
The world needs obfuscated links that display the link in a friendly way.
npm install react-obfuscate --save