A React component to obfuscate contact links and text
npm install @south-paw/react-obfuscate-ts🕵️ A React component to obfuscate contact links and text
- Easy to implement component for hiding your contact links or text in the DOM.
- Obfuscation of email, tel, sms, href and any other string of text as a child.
- aria-label for screen readers to identify the obfuscated element.
- Polymorphic as prop for use with other Link components (such as your own UI libraries link component).
The component reverses the content in the DOM for you and uses CSS to re-reverse the content so it appears normally to the user, it also replaces the content of the link's href attribute. When a user hovers, clicks or focuses the element, it is considered "interacted" and has its content un-reversed and the correct href attribute applied. This ideally makes the link useless for a bot/spammer but ensures it remains user friendly when viewed normally.
``jsx
import { Obfuscate } from '@south-paw/react-obfuscate-ts';
// use the component's children to create the link and display
// or specify the email address for the link with custom children
`
I was inspired to create this package after using the coston/react-obfuscate package for two years. After switching the majority of my own code bases to TypeScript, I was disappointed to see there was no @types` package for this original version and that it wasn't reliably obfuscating it's content in some of the usages I had. I decided that I'd do a variant of that component with a new API, a few minor bug fixes and one that included types as well.
If you find any, please report them here so they can be squashed.
MIT, see the LICENSE file.