Astro Interactivity

For a brick inside an Astro project, you can specify the type of client interactivity.

By default no JavaScript is sent to the client. For interactive bricks that require client-side JavaScript (such as carousels or forms with validation), you can specify the Astro client directives in the brick’s schema.

To do this, add astroInteractivity on the brick’s schema. This property accepts simple values like load, idle, visible, or objects for more complex scenarios.

Here’s the TypeScript defintion for astroInteractivity:

astroInteractivity?:
  | 'load'
  | { load: true } // The same as 'load'
  | 'idle'
  | { idle: true } // The same as 'idle'
  | { idle: { timeout: number } }
  | 'visible'
  | { visible: true } // The same asd visible
  | { visible: { rootMargin: string } }
  | { media: string }
  | { only: string }

Usage Examples

Carousel.tsx

...
Carousel.schema = {
  ...
  astroInteractivity: 'load'
}