Client directive: Timer

Caution

This library is in beta until releasing the version 1.0.0. It is susceptible to breaking changes as we are polishing the public surface to make it better.

The client:timer directive hydrates the component when the specified time in milliseconds has been elapsed. It uses setTimeout under the hood.

Setup

For setting up the directive, include the integration in your Astro project.

1. Install the library using your preferred package manager:

   npm i -D @astro-tools/client-directives

2. Add the integration to your project configuration:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   
   import { timerClientDirective } from '@astro-tools/client-directives/timer';
   
   export default defineConfig({
     integrations: [timerClientDirective()],
   });

With client:on directive

To integrate this directive with the client:on, configure the directive as follows:

astro.config.mjs

import { defineConfig } from 'astro/config';

import { onClientDirective } from '@astro-tools/client-directives/on';

export default defineConfig({
  integrations: [
    onClientDirective({
      directives: [
        {
          name: 'timer',
          entrypoint: '@astro-tools/client-directives/timer/directive',
        },
      ],
    }),
  ],
});

Tip

Both integrations, client:on integration and this one, can be included in the project configuration, allowing you to use both directives, client:timer="3000" and client:on="timer 3000", in your components.

Use

Add the directive as attribute of the component to hydrate with the time in millseconds:

<MyComponent client:timer="3000" />

Remember, this directive doesn’t take into consideration the loading state of the page.

Example.astro

---
import Square from '@/libs/examples/Square.svelte';

interface Props {
  id: string;
}

const { id } = Astro.props;
---
<Square {id} text="Click me!" client:timer="3000" />

Square.svelte

<script lang="ts">
import { notifyHydration } from '@/libs/examples/hydration';
import { onMount } from 'svelte';

export let id: string;
export let text: string;

let hydrated = false;

onMount(() => {
  hydrated = true;
  notifyHydration(id);
});
</script>

<button
  type="button"
  class="square"
  class:square--hydrated={hydrated}
  on:click={() => text = 'Clicked!'}>
  {text}
</button>

<style lang="scss">
  @use './Square.scss';
</style>

Preview Static

Click me!