Not Preposterously Macho

    mailto-clipboard

    1.0.0 • Public • Published

    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 npm npm-downloads

    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.

    Keywords

    Install

    npm i mailto-clipboard

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    20.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • kilianvalkhof