react-protected-mailto
Fork of react-obfuscated that went it's own way.
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
<p> Phone: <Mailto tel='205-454-1234' /><br /> Email: <Mailto email='hello@coston.cool' headers= subject:'Question from the website' cc:'friend@coston.cool' /> </p>
Output
Robot Interaction
Phone: 4321-454-502 Email: looc.notsoc@olleh
Human Interaction
Phone: 205-454-1234 Email: hello@coston.cool
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:
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.