Svelte component for copy to clipboard.

Clipboard.html

<script>
  import { tick } from 'svelte';

  let valueCopy = null;
  export let value = null;
  let areaDom;

  async function copy() {
    valueCopy = value;
    await tick();
    areaDom.focus();
    areaDom.select();
    let message = 'Copying text was successful';
    try {
      const successful = document.execCommand('copy');
      if (!successful) {
        message = 'Copying text was unsuccessful';
      }
    } catch (err) {
      message = 'Oops, unable to copy';
    }

    // we can notifi by event or storage about copy status
    console.log(message);
    valueCopy = null;
  }
</script>

{#if valueCopy != null}
  <textarea bind:this={areaDom}>{ valueCopy }</textarea>
{/if}
<svg on:click={copy}
     title="Copy to clipboard"
     class="octicon octicon-clippy"
     viewBox="0 0 14 16"
     version="1.1"
     width="14"
     height="16"
     aria-hidden="true"
>
  <path fill-rule="evenodd"
        d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path>
</svg>


<style>
  textarea {
    position: fixed;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
    padding: 0;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
  }

  svg {
    cursor: pointer;
  }
</style>

Do you have a working version with the last svelte version? It is not working anymore on REPL.

Do you have a working version with the last svelte version? It is not working anymore on REPL.

I will make soon. Current version for svelte2.

Updated and I made REPL https://svelte.dev/repl/43f422eac924471aaf023b16e513188f?version=3.17.1

Thanks for this. It me to make a version which will work when document.execCommand("copy") is no longer supported (as it is deprecated).

The component below tries document.execCommand("copy") and so works in browsers (e.g. Firefox) which don't support the new method, and then tries the new permissions API (supported in Chrome), and if that doesn't work has a manual fallback.

https://github.com/theWebalyst/visualisation-lab/blob/master/src/utils/Clipboard.svelte

You are welcome. Thanks for the notification. Your version much more mature and integrated into your project.

This ended up being less code and cross-browser for me.
https://github.com/EffectiveAF/run-a-relay/blob/56f9ae9cd55c2612f8b21fe13b997db646ee15ba/src/Code.svelte#L4-L33