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
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 | 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). |