smolter
API

navigationClick

Check whether an anchor click is eligible for client-side routing.

Compatibility

ReactAvailable in this renderer's browser integration.
React SSRAvailable to this renderer's SSR integration; browser event handlers run after hydration.
PreactAvailable in this renderer's browser integration.
Preact SSRAvailable to this renderer's SSR integration; browser event handlers run after hydration.

Import from @kasperrt/smolter/utils

Signature

function navigationClick(
  event: NavigationClickEvent,
  anchor: HTMLAnchorElement,
): boolean;

Parameters

Pass the native MouseEvent and the anchor element. For React events, pass event.nativeEvent and event.currentTarget.

Returns

Returns false for an already prevented event, a non-primary button, any modifier key, a download attribute, or a target other than an empty target or _self. Otherwise returns true.

Example

The helper only checks browser interaction semantics. Resolve and check the destination before preventing the default behavior.

import { internalURL, navigationClick } from "@kasperrt/smolter/utils";
import type { Router } from "@kasperrt/smolter/preact";

export function handleLink(event: MouseEvent, anchor: HTMLAnchorElement, router: Router) {
  if (!navigationClick(event, anchor)) return;

  const target = internalURL(router.getSnapshot().url, anchor.href);
  if (!target) return;

  event.preventDefault();
  void router.navigate(target.href);
}

Scope

Does not prevent default, stop propagation, inspect route existence, check same-origin URLs, or perform navigation. Link already combines these responsibilities; use this helper only when implementing an application-owned anchor integration.

View implementation ↗