useClickableContainer · astryx-svelte

useClickableContainer @astryx-svelte/core v0.3.0 · hooks

Usage

Makes a container element clickable while preserving nested interactive element behavior. Solves the "nested interactive elements" problem: when a card is clickable but contains buttons/links, clicking those should NOT trigger the card's action. Detects interactive ancestors between the click target and the container, and ignores text selections. Supports href navigation (including middle-click and Ctrl/Cmd+click for new tabs).

ts
 
import { hooks } from '@astryx-svelte/core/hooks';

Best practices

Guidance	Practices
Do	Attach both onClick and onMouseUp to the container element for full click handling including middle-click.
Do	Use inside ClickableCard or SelectableCard for the standard card interaction pattern.
Don't	Use when the entire container is a single interactive element; just use a <button> or <a> directly.

Parameters

Parameter	Type	Default	Description
`options` Required	`() => UseClickableContainerOptions`	—	Configuration object for the clickable container.
`options.container` Required upstream: `options.containerRef`	`HTMLElement \| null`	—	Ref to the outer container element.
`options.interactive` upstream: `options.interactiveRef`	`HTMLElement \| null`	—	Ref to the primary interactive element inside (link, button). If no onClick or href is provided, clicks are proxied to this element.
`options.onclick` upstream: `options.onClick`	`(event: MouseEvent) => void`	—	Click handler fired when the container surface (not a nested interactive element) is clicked.
`options.href`	`string`	—	Navigation URL. When provided, clicking the container navigates to this URL.
`options.target`	`string`	—	Link target (e.g., '_blank'). Used with href for navigation behavior.
`options.disabled`	`boolean`	`false`	Whether the container is disabled.

Returns

Field	Type	Default	Description
`onclick` upstream: `onClick`	`(event: MouseEvent) => void`	—	Click handler to attach to the container element.
`onmouseup` upstream: `onMouseUp`	`(event: MouseEvent) => void`	—	Mouse up handler to attach to the container (handles middle-click navigation for href).