Made by @kilianvalkhof
- 💻 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
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.
Go to CodeSandbox to show the demo.
Clone the repository and run yarn start
to start the demo server, then open http://localhost:5000/
Install using npm install mailto-clipboard
.
checkout the repository then run
yarn
yarn build
and the builds will be in the dist
folder.
Clone the repository and run yarn start
to start the demo server, then open http://localhost:5000/
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>
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.
To remove the MailtoClipboard functionality, call MailtoClipboard.destroy()
. This will revert any original titles, remove the event listeners and the tooltip.
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
});
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 {
}
mailto-clipboard is ISC licensed.