react-protected-mailto
v1.0.3
Published
React component to protect email addresses from crawlers.
Downloads
1,044
Maintainers
Readme
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
import React from 'react'
import Mailto from 'react-protected-mailto'
export default () => (
<p>
Phone: <Mailto tel='205-454-1234' /><br />
Email: <Mailto
email='[email protected]'
headers={
{subject:'Question from the website'},
{cc:'[email protected]'}
}/>
</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:205-454-1234">205-454-1234</a><br>
Email: <a href="mailto:[email protected]&subject=Question%20from%20the%20website&[email protected]">[email protected]</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:
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.