Astryx Design System

useClickableContainer@astryxdesign/core v0.0.15 · useClickableContainer

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 {useClickableContainer} from '@astryxdesign/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

Param	Type	Description
optionsrequired	UseClickableContainerOptions	Configuration object for the clickable container.
options.containerRefrequired	RefObject<HTMLElement \| null>	Ref to the outer container element.
options.interactiveRef	RefObject<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	(event: MouseEvent<HTMLElement>) => 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 (default: false)	Whether the container is disabled.

Returns

Field	Type	Description
onClick	(event: MouseEvent<HTMLElement>) => void	Click handler to attach to the container element.
onMouseUp	(event: MouseEvent<HTMLElement>) => void	Mouse up handler to attach to the container (handles middle-click navigation for href).