#Component in client script

1 messages · Page 1 of 1 (latest)

past zephyrBOT
#

Hi @wary summit. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro components are HTML-only templating components with no client-side runtime. They render to HTML either at build-time or on-demand using server-side rendering (SSR). Therefore, you cannot directly use an Astro component like BadgePill in a client-side script as you would with a JavaScript or a JavaScript framework component.

However, you can use a <script> tag in your Astro component template to send JavaScript to the browser that executes in the global scope. This allows you to add interactivity to your Astro components. Scripts can be used to add event listeners, send analytics data, play animations, and everything else JavaScript can do on the web.

Here's an example of how you can use a <script> tag in an Astro component:

<button data-confetti-button>Celebrate!</button>
<script>
  // Import npm modules.
  import confetti from 'canvas-confetti';

  // Find our component DOM on the page.
  const buttons = document.querySelectorAll('[data-confetti-button]');

  // Add event listeners to fire confetti when a button is clicked.
  buttons.forEach((button) => {
    button.addEventListener('click', () => confetti());
  });
</script>

In your case, you would need to render the BadgePill component on the server-side and then manipulate it on the client-side if needed. If you need to dynamically create BadgePill components on the client-side, you might need to consider using a JavaScript framework component instead.

#

@wary summit kapa.ai is still learning and improving, please let us know how it did by reacting below

wary summit
#

@past zephyr BadgePill component is not dynamic. Is a static HTML. How can i render in server side and use it in the client script?

past zephyrBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Astro components are rendered on the server-side by default. If you want to use the BadgePill component in your client-side script, you would need to render it on the server-side first and then reference it in your client-side script.

Here's an example of how you can do this:

  1. First, import and use the BadgePill component in your Astro component:
---
import BadgePill from '../components/BadgePill.astro';
---
<main>
  <article>
    <header>
      <BadgePill title="Cartão encontrado!" class="mb-4" id="badgePill" />
      <h2 class="font-semibold text-zinc-700 text-3xl mb-1">Fulano,</h2>
      <p class="font-medium text-zinc-500 text-base leading-tight text-balance">
        confira o cartão que selecionamos para você:
      </p>
    </header>
  </article>
</main>
  1. Then, in your client-side script, you can reference the BadgePill component using its ID:
<script>
  if (typeof document !== 'undefined') {
    document.addEventListener('DOMContentLoaded', () => {
      const badgePill = document.querySelector('#badgePill');

      if (!badgePill) {
        return;
      }

      // Now you can manipulate the BadgePill component using JavaScript
      // For example, you can change its title attribute
      badgePill.setAttribute('title', 'New title');
    });
  }
</script>

Remember, Astro components are HTML-only and do not have a client-side runtime. This means you can manipulate them using JavaScript like any other HTML element, but they do not have any built-in interactivity like JavaScript framework components.