https://github.com/quentindutot/astro-directives

An astro integration for more client directives.
https://github.com/quentindutot/astro-directives

Last synced: about 1 month ago
JSON representation

An astro integration for more client directives.

• Host: GitHub
• URL: https://github.com/quentindutot/astro-directives
• Owner: QuentinDutot
• Created: 2023-06-03T00:34:54.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-08T12:22:00.000Z (almost 2 years ago)
• Last Synced: 2025-04-07T16:52:40.247Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 5.86 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# astro-directives [![npm](https://img.shields.io/npm/v/astro-directives.svg)](https://www.npmjs.com/package/astro-directives)

An astro integration for more client directives.

## How to use

### Install the package

```

npm install astro-directives

```

### Update astro.config.mjs

```tsx

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

```jsx

```

## Directives

| Attribute                      | Load the javascript and hydrate on ...                               |

| ------------------------------ | -------------------------------------------------------------------- |

| client:click                   | element click event                                                  |

| client:hover                   | element mouseover event                                              |

| client:scroll                  | window scroll event                                                  |