Frontend: copy-to-clipboard with fallback

7342 views

                  export async function copyToClipboard(text: string) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.opacity = '0';
    document.body.appendChild(ta);
    ta.focus();
    ta.select();
    const ok = document.execCommand('copy');
    document.body.removeChild(ta);
    return ok;
  }
}

Copying code is a core interaction in a snippets app, and it needs to work reliably across browsers. The modern API is navigator.clipboard.writeText, but it requires HTTPS and permissions in some contexts. I try it first, and if it fails I fall back to a hidden textarea + execCommand('copy') (still widely supported). I also provide immediate feedback (toast or inline ‘Copied!’ state) so users don’t mash the button. Handling both modern and legacy paths reduces support tickets from weird browser environments.

Mateo Rodriguez

More from Mateo Rodriguez

Frontend: copy-to-clipboard with fallback

0 Comments

More from Mateo Rodriguez