astro-directives

An astro integration for more client directives.

How to use

Install the package

npm install astro-directives

Update astro.config.mjs

import { defineConfig } from "astro/config";
import directives from "astro-directives";

export default defineConfig({
  // ...
  integrations: [directives()],
  experimental: {
    customClientDirectives: true,
  },
});

Note The experimental.customClientDirectives flag may not be needed in the future.

Use a directive

<Component client:hover />

Directives

| Attribute | Load the javascript and hydrate on ... | | ------------------------------ | -------------------------------------------------------------------- | | client:click | element click event | | client:hover | element mouseover event | | client:scroll | window scroll event |