Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kilian/mailto-clipboard
Converts all `mailto:` links to copying the email address to the clipboard
https://github.com/kilian/mailto-clipboard
Last synced: 15 days ago
JSON representation
Converts all `mailto:` links to copying the email address to the clipboard
- Host: GitHub
- URL: https://github.com/kilian/mailto-clipboard
- Owner: Kilian
- Created: 2020-04-17T20:46:50.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:40:08.000Z (almost 2 years ago)
- Last Synced: 2024-08-11T11:15:54.658Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 511 KB
- Stars: 4
- Watchers: 3
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
### Made by [@kilianvalkhof](https://twitter.com/kilianvalkhof)
#### Other projects:
- 💻 [Polypane](https://polypane.app) - Develop responsive websites and apps twice as fast on multiple screens at once
- 🖌️ [Superposition](https://superposition.design) - Kickstart your design system by extracting design tokens from your website
- 🗒️ [FromScratch](https://fromscratch.rocks) - A smart but simple autosaving scratchpad
---
# mailto-clipboard [](https://www.npmjs.com/package/mailto-clipboard) [](https://www.npmjs.com/package/mailto-clipboard)
Automatically rewrites all mailto: links on a page to copy the email address on click.
Inspired by [I hate mailto](https://ihatemailto.com/) (**which you should BUY**) by [@tkmadeit](https://twitter.com/tkmadeit) and made with his blessing.
## Online Demo
Go to [CodeSandbox](https://githubbox.com/Kilian/mailto-clipboard) to show the demo.
## Run Demo
Clone the repository and run `yarn start` to start the demo server, then open http://localhost:5000/
## Installation
Install using `npm install mailto-clipboard`.
### Build from source
checkout the repository then run
```bash
yarn
yarn build
```
and the builds will be in the `dist` folder.
## Run Demo
Clone the repository and run `yarn start` to start the demo server, then open http://localhost:5000/
## 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:
```js
import MailtoClipboard from 'mailto-clipboard';
// after document has loaded
MailtoClipboard();
```
Browser as directly loaded module
```html
import MailtoClipboard from './mailto-clipboard/dist/index.esm.js';
MailtoClipboard();
```
Browser as global variable
```html
MailtoClipboard();
```
### 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.
```js
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:
```css
/* 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.