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 🙏

© 2026 – Pkg Stats / Ryan Hefner

@mail3/mail3-me

v0.1.5

Published

`mail3-me-button` provides a simple way to interact with [Mail3 App](https://app.mail3.me).

Vulnerabilities

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

Links

Maintainers

coldsnap666coldsnap666

Keywords

Readme

mail3-me-button

mail3-me-button provides a simple way to interact with Mail3 App.

Usage

mail3-me-button is a Web Component, Just like an HTML element, mail3-me-button has some built-in attributes:

  • to(string): an email address as the mail receiver; when provided, the widget displays the number of unread messages between this address and the currently logged-in mailbox in Mail3 app, otherwise it displays the number of all unread messages.
  • lite(boolean): in lite mode, mail3-me-button will be displayed as a circular Icon without text.
  • variant(string): Some default style set for mail3-me-button, optionally one of solid, outline, ghost, default is solid
  • icon_type(string): Icon type for Mail3 Icon, optionally one of black, white, light, solid, default is solid
  • icon_style(string): CSS style for Mail3 Icon

In addition to the above built-in attributes, mail3-me-button also supports passing in all the attributes of the anchor element, such as style, target, etc.

HTML

Live demo

After adding the mail3-me-button script, you can use it like an HTML element.

<!DOCTYPE html>
<html>
  <head>
    <title>Mail3 Me Button Demo</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- 3KiB gziped with public cdn, it is recommended that self-hosted this script -->
    <script src="https://unpkg.com/@mail3/mail3-me"></script>
    <mail3-me to="[email protected]" />
  </body>
</html>

React

Live demo

Install mail3-me-button:

$ npm i @mail3/mail3-me
# or yarn
$ yarn add @mail3/mail3-me

Import the dependency in the entry file of your application:

// app.js
// only 3KiB gziped
import '@mail3/mail3-me'

Use mail3-me-button like an HTML Element:

<App>
  <Navbar />
  <mail3-me to="[email protected]" />
</App>

Caveats

The style attribute is replaced by the css attribute, and all custom style attribute should pass in a string type instead of Object.

<App>
  <Navbar />
  <mail3-me css="width: 200px;" icon_style="width: 20px;" />
</App>