An intelligent React component to obfuscate any contact link
npm install react-obfuscate
!GitHub last commit
!react-obfuscate
Live demo: react-obfuscate.coston.io
The user passes the contact link as an email, tel, sms, facetime, or href prop. The component obfuscates href data until a hover, click, or focus 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.
``bash`
npm install --save react-obfuscate
`js
import React from 'react';
import Obfuscate from 'react-obfuscate';
export default () => (
Phone:
Email:{' '}
headers={{
cc: 'dade@zero-cool.af',
bcc: 'smith@machina.net',
subject: 'react-obfuscate',
body: 'Down with the machines!',
}}
/>
$3
#### Robot Interaction
html
Phone:
>4321-454-502 >
Email:
>oi.notsoc@olleh >
`#### Human Interaction
js
Phone: 205-454-1234
Email: hello@coston.io
`Common Options
| Prop | Type | Default | Description |
| ---------- | -------- | ------- | -------------------------------------------- |
|
| string | null | email address of the intended recipient |
| headers | object | null | subject, cc, bcc, body, etc |
| tel | string | null | telephone number of the intended recipient |
| sms | string | null | sms number of the intended recipient |
| facetime | string | null | facetime address of the intended recipient |
| href | string | null | Obfuscate any other URL type (e.g. WhatsApp) |Uncommon Options
| Prop | Type | Default | Description |
| ------------------- | ---------- | -------------- | -------------------------------------------------------------- |
|
linkText | string | 'obfuscated' | add custom pre-interaction href attribute placeholder text |
| obfuscate | boolean | true | set to false to disable obfuscation |
| obfuscateChildren | boolean | true | set to false to disable obfuscation of children |
| element | string | 'a' | use if you want to override the default a tag |
| onClick | function | null | called prior to setting location (e.g. for analytics tracking) |Development
`bash
npm start
`Consecutive Obfuscate/inline elements
react-obfuscate is an inline element. Using consecutive inline elements inside a block element causes an issue with the
reversal on Chrome. To prevent this,
add any text between the elements, wrap with another element (like ), or add style={{display:'inline-block'}} to prevent any issues.Example Case:
`js
`Obfuscating custom elements with the
propWith the
element prop, users can obfuscate any element, like paragraphs or headers. Changing the dom element also removes the href and onClick props. Custom styling is required due to handling of right-to-left direction styles. Usually, adding style={{textAlign:'left'}} will suffice.Example Case:
`js
This paragraph is more secret than others.
`Children
By default, objects are not reversed in the dom, but other types are. The
prop set will disabled this functionality when set to false. If the child is an object, like html elements are, it will be rendered normally.##### Example Use Case
`js
``react-obfuscate is awesome thanks to these community members:
- coston
- bostrom
- timmygee
- mic
- ravinggenius
- charlesbdudley
- dalbitresb12
Please help make this react component better. Feel free to submit an issue, or contribute through a pull request.
Licensed under the MIT license.