Web component wrapper for Email Obfuscator.
Demo: https://email-obfuscator-webcomponent-demo.vercel.app/
- ✨ No External Deps & Lightweight (~ 1kB gzipped)
- 👀 Web Component = Can be used with any JS library that works with HTML
- 🥳 Deobfuscated using JS/Canvas (Scrape bots no likey JS!)
- 🛠️ Customisable with Slots (soon! see todos)
- 💪 Written in Typescript
# npm
npm install email-obfuscator-webcomponent
# yarn
yarn add email-obfuscator-webcomponentor in browser end of <body> tag
<script type="module">
import EmailAddress from "https://cdn.skypack.dev/email-obfuscator-webcomponent";
customElements.define("email-address", EmailAddress);
</script>-
Generate the Encoded image here and save the image into your public/assets directory
-
In your html/Component template add the webcomponent with the encoded image source.
<email-address src="./encoded-image.png"></email-address>For some frameworks like Vue for example, you might need to configure the bundler so it plays well with web components.
Framework Usages:
You can use slot="loading" to customize the loading state of the component.
<email-address src="./encoded-image.png">
<span slot="loading">...</span>
</email-address>You can customize the anchor link using ::part() pseudo-element selector to match the link part.
email-address::part(link) {
display: inline-block;
color: green;
}Or if you want to use a custom tag instead of the default anchor text you can use the slot="link" like so:
<email-address src="https://rumaan.dev/jkvu1o0le24.png">
<span slot="loading">...</span>
<span slot="link"> This is a customised mailto link </span>
</email-address>- Expose slots to customise link
- Export webcomponent types
- Tests
- Readme with examples using in React, Vue etc.
Decoder code is basically a slightly modified / Typescriptified version of Email Obfuscator by Jason O'Neill