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';
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({
defaultStyle: true,
showTooltip: true,
tooltipText: `Copy "{email}" to clipboard`,
position: 'bottom',
showConfirmation: true,
confirmationText: `"{email}" copied to clipboard`,
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:
.MailtoClipboard-tooltip {
}
.MailtoClipboard-tooltip::before {
}
.MailtoClipboard-tooltip-active
.MailtoClipboard-tooltip-top {
}
.MailtoClipboard-tooltip-active {
}
License
mailto-clipboard is ISC licensed.