npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

email-obfuscator-webcomponent

v0.0.4-beta-15

Published

A simple Web Component that Obfuscates Email address in HTML source.

Downloads

12

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

rumaanrumaan

Keywords

email obfuscatorwebcomponent

Readme

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>

  1. Generate the Encoded image here and save the image into your public/assets directory

  2. 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>

TODOS

  • [x] Expose 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 by Jason O'Neill