Live demo: coston.io/react-obfuscate
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.
The world needs obfuscated links that display the link in a friendly way.
npm install --save react-obfuscateimport React from 'react'
import Obfuscate from 'react-obfuscate'
export default () => (
<p>
Phone: <Obfuscate tel='205-454-1234' /><br />
Email: <Obfuscate
email='hello@coston.cool'
headers={
{subject:'Question from the website', cc:'friend@coston.cool'}
}/>
</p>
)<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><p>
Phone: <a href="tel:205-454-1234">205-454-1234</a><br>
Email: <a href="mailto:hello@coston.cool&subject=Question%20from%20the%20website&cc=friend@coston.cool">hello@coston.cool</a>
</p>| Prop | Type | Argument | Default | Description |
|---|---|---|---|---|
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 |
npm run buildreact-obfuscate is awesome thanks to these community members:
Please help make this react component better. Submit any issue and/or make a pull request!
- Write some good tests
- Convert clipboard text left to right
Licensed under the MIT license.