clipboard-copy-confirm

Install

bun i clipboard-copy-confirm

Overview

This package is framework agnostic and should work in Vue, Svelte, React, etc.

In addition to copying text to the clipboard, a success confirmation element fades in then out.

The developer has full layout and style control over the following two page elements:

1. Action element - a button or icon, to invoke the copy to clipboard process.
2. The confirmation element - it's initialized to not display, but after copying to clipboard completes, the confirmation text or icon (or both) fades in, will display for several seconds, and then just as smoothly, fade out.

The full duration of fade in and out is set to 3000 ms (default) but the clipboard-copy-confirm module allows a duration override.

Example snippets below will illustrate.

Examples

No matter which framework you use, the code snippets below should illustrate how to use clipboard-copy-confirm.

HTML

<!--
  The 'my-confirm-id' id is user-defined and must
  match the id used in the confirmation element.
-->
<button @click="copyMyText('my-confirm-id')">Copy to clipboard</button>

<!--
  Initially, this element's visibility is automatically
  hidden and its opacity is set to 0. visibility property
  is used to avoid layout shifting during fade-in and fade-out
  animations.

  After copying to clipboard completes, this element will
  fade in, display for a few seconds, and then fade out.

  !!! IMPORTANT !!!
  g-copy-confirm-element class name is not user-defined;
  it is required by this package.
-->
<div
  id="my-confirm-id"
  class="g-copy-confirm-element"
>
  Copied! ✓
</div>

TypeScript

// 1. Import the function.
import { copyToClipboard } from 'clipboard-copy-confirm'

// 2. This is the text that will be copied to the clipboard.
const myText = 'text to be copied...'

// 3. Initialize the copy options.
const copyOptions = {
  // required
  textToCopy: myText,

  // required
  //
  // The empty string will be replaced with the argument passed
  // in via the click event.
  confirmElementId: '',

  // optional override
  //
  // default is 3000.
  durationMs: 4200,
}

// 4. This is the click event handler.
const copyMyText = async (confirmId: string) => {
  copyOptions.confirmElementId = confirmId

  // All the magic happens right here...
  const isSuccess = await copyToClipboard(copyOptions)
}

Credits

Gerry Gold

October 2026

Have fun!