mailto-clipboard

Made by @kilianvalkhof

Other projects:

• 💻 Polypane - Develop responsive websites and apps twice as fast on multiple screens at once
• 🖌️ Superposition - Kickstart your design system by extracting design tokens from your website
• 🗒️ FromScratch - A smart but simple autosaving scratchpad

---

mailto-clipboard

Automatically rewrites all mailto: links on a page to copy the email address on click.

Inspired by I hate mailto (which you should BUY) by @tkmadeit and made with his blessing.

Installation

Install using npm install mailto-clipboard.

Build from source

checkout the repository then run

yarn
yarn build

and the builds will be in the dist folder.

Usage

The module is provided in two formats: an ECMAScript (ES) module in dist/index.esm.js, and a Universal Module Definition (UMD) in dist/index.umd.js. This enables support for the following runtime environments:

es6:

import MailtoClipboard from 'mailto-clipboard';

// after document has loaded
MailtoClipboard();

Browser as directly loaded module

<script type="module">
  import MailtoClipboard from './mailto-clipboard/dist/index.esm.js';

  MailtoClipboard();
</script>

Browser as global variable

<script src="./mailto-clipboard/dist/index.umd.js"></script>

<script>
  MailtoClipboard();
</script>

re-applying when the page content changed

To re-apply when the page content has changed, call MailtoClipboard() again. Any options you pass will be updated, the rest of the options will be preserved from the previous invocation.

removing MailtoClipboard

To remove the MailtoClipboard functionality, call MailtoClipboard.destroy(). This will revert any original titles, remove the event listeners and the tooltip.

Configuration

MailtoClipboard can be configured by passing it a configuration object. Any undefined values will use the default values below.

MailtoClipboard({
  // if true, injects CSS to style. If set to false, bring your own design.
  defaultStyle: true,

  // Show tooltips on hover
  showTooltip: true,
  // Text to show on hover. HTML supported, {email} will be replaced with the email value
  tooltipText: `Copy "{email}" to clipboard`,
  // Position of the tooltip. Can be "top" or "bottom"
  position: 'bottom',

  // show a confirmation message after click
  showConfirmation: true,
  // Text to show on click. HTML supported, {email} will be replaced with the email value
  confirmationText: `"{email}" copied to clipboard`,
  // Timeout for when the tooltip should disappear automatically. Set to false to only hide on mouse out.
  confirmationTimeout: 1000
});

Styling

If you set defaultStyle to false, no styling will be supplied to the tooltip. Positioning of the tooltip will be done automatically, centered horizontally above or below the element.

To style the tooltip, use these classes:

/* tooltip element */
.MailtoClipboard-tooltip {
}

/* tooltip nib */
.MailtoClipboard-tooltip::before {
}

/* active (visible) tooltip */
.MailtoClipboard-tooltip-active

/* tooltip should be shown above element */
.MailtoClipboard-tooltip-top {
}

/* tooltip should be shown below element */
.MailtoClipboard-tooltip-active {
}

License

mailto-clipboard is ISC licensed.