https://github.com/south-paw/react-obfuscate-ts
🕵️ A React component to obfuscate contact links and text
https://github.com/south-paw/react-obfuscate-ts
component email hacktoberfest hide link obfuscate react sms tel
Last synced: about 1 year ago
JSON representation
🕵️ A React component to obfuscate contact links and text
- Host: GitHub
- URL: https://github.com/south-paw/react-obfuscate-ts
- Owner: South-Paw
- License: mit
- Created: 2020-07-16T10:12:45.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-08-04T09:51:40.000Z (almost 3 years ago)
- Last Synced: 2025-04-13T02:07:47.857Z (about 1 year ago)
- Topics: component, email, hacktoberfest, hide, link, obfuscate, react, sms, tel
- Language: TypeScript
- Homepage: https://react-obfuscate-ts.netlify.app
- Size: 850 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @south-paw/react-obfuscate-ts
🕵️ A React component to obfuscate contact links and text
[](https://www.npmjs.com/package/@south-paw/react-obfuscate-ts)
## Features
- 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).
## How it works
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.
## Basic usage
```jsx
import { Obfuscate } from '@south-paw/react-obfuscate-ts';
// use the component's children to create the link and display
hello@example.com;
// or specify the email address for the link with custom children
Email me!;
```
## Inspiration
I was inspired to create this package after using the [coston/react-obfuscate](https://github.com/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.
## Issues and Bugs
If you find any, please report them [here](https://github.com/South-Paw/react-obfuscate-ts/issues) so they can be squashed.
## License
MIT, see the [LICENSE](./LICENSE) file.