useClickableContainer
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).
Signature
useClickableContainer({ containerRef, interactiveRef, onClick: onClickProp, href, target, disabled = false, }: UseClickableContainerOptions): ClickableContainerResult| Name | Type and behavior |
|---|---|
options | UseClickableContainerOptions · requiredConfiguration object for the clickable container. |
options.containerRef | RefObject<HTMLElement | null> · requiredRef to the outer container element. |
options.interactiveRef | RefObject<HTMLElement | null> · optionalRef 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 · optionalClick handler fired when the container surface (not a nested interactive element) is clicked. |
options.href | string · optionalNavigation URL. When provided, clicking the container navigates to this URL. |
options.target | string · optionalLink target (e.g., '_blank'). Used with href for navigation behavior. |
options.disabled | boolean · optional · default falseWhether the container is disabled. |
| Name | Type and behavior |
|---|---|
onClick | (event: MouseEvent<HTMLElement>) => voidClick handler to attach to the container element. |
onMouseUp | (event: MouseEvent<HTMLElement>) => voidMouse up handler to attach to the container (handles middle-click navigation for href). |
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).
- Attach both onClick and onMouseUp to the container element for full click handling including middle-click.
- Use inside ClickableCard or SelectableCard for the standard card interaction pattern.
- Use when the entire container is a single interactive element; just use a <button> or <a> directly.