Rocket Copy Button Pro

Rocket is currently in alpha – available in the Datastar Pro repo.

A simple, reusable copy-to-clipboard button component with visual feedback.

Demo

Explanation #

The component outputs a copy button that uses the Clipboard API to copy the text in the code attribute to the clipboard. It provides visual feedback that auto-resets after 2 seconds.

Usage Example #

1<rocket-copy data-attr:code="$myCode"></rocket-copy>

Rocket Component #

 1<template data-rocket:copy-button 
 2          data-prop:code="str"
 3>
 4  <script>
 5    $$copied = false
 6  </script>
 7  <div class="copy-button-wrapper">
 8    <button class="copy-button small" title="Copy code"
 9            data-on:click="navigator.clipboard.writeText($$code); $$copied = true"
10            data-on:click__delay.2s="$$copied = false">
11      <iconify-icon noobserver
12                    data-attr:icon="'pixelarticons:' + ($$copied ? 'section-copy' : 'copy')" />
13    </button>
14    <template data-if="$$copied">
15      <span class="copy-popover">Copied!</span>
16    </template>
17  </div>
18</template>