island prop
Complete reference for the island prop API.
Type definition
interface IslandProp {
condition?: IslandCondition;
id?: string;
conditionArg?: string;
}
type IslandCondition =
| 'on:client'
| 'on:visible'
| 'on:interaction'
| 'on:idle'
| `media:${string}`
| `on:${string}`; // custom directives
Properties
| Property | Type | Default | Description |
|---|---|---|---|
condition | IslandCondition | 'on:client' | When the island hydrates |
id | string | Auto-generated | Stable identifier for state persistence |
conditionArg | string | undefined | Argument passed to custom directives |
Valid condition values
| Value | Trigger |
|---|---|
on:client | Immediately on page load |
on:visible | Element enters the viewport |
on:interaction | First click or hover |
on:idle | Browser idle time |
media:(query) | CSS media query matches |
on:delay | After a timeout (ms) |
on:scroll | Page scrolled past threshold (px) |
on:event | Custom DOM event fires |
on:match | Media query matches via directive |
on:<custom> | Any registered custom directive |
Usage
<Counter island={{ condition: 'on:interaction' }} />
<Widget island={{ condition: 'on:delay', conditionArg: '2000' }} />
<Counter island={{ condition: 'on:client', id: 'hero-counter' }} />
Props must be serializable to JSON — they are embedded in the HTML as a data attribute for hydration.
See also
- Islands Architecture — conceptual overview and built-in conditions
- Hydration Strategies — custom directives and performance guidance