# email-obfuscator-webcomponent > A simple Web Component that Obfuscates Email address in HTML source. Latest version **0.0.4-beta-15** (published 2023-01-11) · MIT license · 0 weekly downloads ## Install ```sh npm install email-obfuscator-webcomponent pnpm add email-obfuscator-webcomponent yarn add email-obfuscator-webcomponent bun add email-obfuscator-webcomponent ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.4-beta-15 | | Published | 2023-01-11 | | First published | 2023-01-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 6.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Rumaan K | | Maintainers | rumaan | | Keywords | email obfuscator, webcomponent | ## Links - npm: https://www.npmjs.com/package/email-obfuscator-webcomponent - Repository: https://github.com/rumaan/email-obfuscator-webcomponent - Homepage: https://email-obfuscator-webcomponent-demo.vercel.app/ - Issues: https://github.com/rumaan/email-obfuscator-webcomponent/issues - npm.io page: https://npm.io/package/email-obfuscator-webcomponent ## Alternatives - [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads - [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads - [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads - [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads - [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads ## Recent versions - 0.0.4-beta-15 (latest) — 2023-01-11 - 0.0.4-beta-14 — 2023-01-09 - 0.0.4-beta-13 — 2023-01-07 - 0.0.4-beta-12 — 2023-01-07 - 0.0.4-beta-11 — 2023-01-05 - 0.0.4-beta-10 — 2023-01-05 - 0.0.4-beta-9 — 2023-01-05 - 0.0.4-beta-8 — 2023-01-05 - 0.0.4-beta-7 — 2023-01-05 - 0.0.4-beta-6 — 2023-01-05 - 0.0.4-beta-5 — 2023-01-04 - 0.0.4-beta-3 — 2023-01-04 - 0.0.4-beta-1 — 2023-01-04 - 0.0.3 — 2023-01-04 - 0.0.2 — 2023-01-03 - … 1 more at https://npm.io/package/email-obfuscator-webcomponent/versions ## README # Email Obfuscator Webcomponent Web component wrapper for [Email Obfuscator](https://creativetechguy.com/utilities/emailobfuscator). 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)](#todo) - 💪 Written in Typescript ## Installation & Usage ```sh # npm npm install email-obfuscator-webcomponent # yarn yarn add email-obfuscator-webcomponent ``` or in browser end of `` tag ```html ``` 1. Generate the Encoded image [here](https://creativetechguy.com/utilities/emailobfuscator) and save the image into your public/assets directory 2. In your html/Component template add the webcomponent with the encoded image source. ```html ``` For some frameworks like [Vue](https://vuejs.org/guide/extras/web-components.html#example-vite-config) for example, you might need to configure the bundler so it plays well with web components. Framework Usages: - [Vue](/demo/vue/) - [React](/demo/react/) ## Customizable Slots You can use `slot="loading"` to customize the loading state of the component. ```html ... ``` You can customize the anchor link using `::part()` pseudo-element selector to match the `link` part. ```css 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: ```html ... This is a customised mailto link ``` ## TODOS - [x] Expose [slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots) to customise link - [x] Export webcomponent types - [x] Tests - [x] Readme with examples using in React, Vue etc. ## Credits Decoder code is basically a slightly modified / Typescriptified version of [Email Obfuscator](https://creativetechguy.com/utilities/emailobfuscator) by Jason O'Neill --- _Source: https://npm.io/package/email-obfuscator-webcomponent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._