Email-obfuscator-webcomponent NPM

Email Obfuscator Webcomponent

Web component wrapper for Email Obfuscator.

Demo: https://email-obfuscator-webcomponent-demo.vercel.app/

Features

✨ 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

Installation & Usage

# npm
npm install email-obfuscator-webcomponent
# yarn
yarn add email-obfuscator-webcomponent

or 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:

Customizable Slots

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>