Add client-side scripts

View as Markdown

---

Astro components render HTML by default. If your component needs browser behavior, add a <script> tag.

Add a copy button

Create a component that copies text to the clipboard.

/components/copy-command.astro

---
const { command } = Astro.props;
---

<div class="not-prose flex items-center gap-2 rounded-lg border border-gray-200 p-3 dark:border-gray-800">
  <code class="flex-1 text-sm">{command}</code>
  <button type="button" data-copy-command={command} class="rounded-md border border-gray-200 px-3 py-1 text-sm dark:border-gray-700">
    Copy
  </button>
</div>

<script>
  const buttons = document.querySelectorAll('[data-copy-command]');

  buttons.forEach((button) => {
    button.addEventListener('click', async () => {
      const command = button.getAttribute('data-copy-command');
      await navigator.clipboard.writeText(command);
      button.textContent = 'Copied';
    });
  });
</script>

Use it in a page.

/docs/runbooks/deploy-order-service.mdx

import CopyCommand from '@catalog/components/copy-command.astro';

<CopyCommand command="npm run deploy:orders" />

Pass data through HTML attributes

The component script runs when the page loads in the browser. If it needs values from Astro.props, render them as HTML attributes first.

---
const { message } = Astro.props;
---

<button data-message={message}>Show message</button>

<script>
  document.querySelectorAll('[data-message]').forEach((button) => {
    button.addEventListener('click', () => {
      alert(button.getAttribute('data-message'));
    });
  });
</script>

Read the Astro client-side scripts documentation for more details.