Client directive: Hover

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:hover directive hydrates the component when clicking on it or when the specified element is clicked.

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 { hoverClientDirective } from '@astro-tools/client-directives/hover';
   
   export default defineConfig({
     integrations: [hoverClientDirective()],
   });

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: 'hover',
          entrypoint: '@astro-tools/client-directives/hover/directive',
        },
      ],
    }),
  ],
});

Tip

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

Use

Add the directive as attribute of the component to hydrate:

<MyComponent client:hover />

When hovering in any part of the component, the component will be hydrated and the event will be replayed using the target of the initial event.

Example.astro

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

interface Props {
  id: string;
}

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

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

Hover me!