@evancnavarro/anchor-highlight

Runtime-agnostic deep-link anchor contract: id ⇄ hash ⇄ href. One place owns how a stable id becomes a DOM id, a URL hash, and a shareable href — so the page that emits a deep link and the page that receives it can never drift. Zero dependencies.

Install

npm install @evancnavarro/anchor-highlight

Usage

import {
  anchorId,
  anchorHref,
  elementIdFromHash,
  matchesAnchorHash,
} from "@evancnavarro/anchor-highlight";

// Emitting a deep link
anchorId("entry", 42);                 // "entry-42"  → use as the element's DOM id
anchorHref(location, "entry", 42);     // "https://…/path#entry-42"  → shareable href

// Receiving one (on load / hashchange)
elementIdFromHash("#entry-42", "entry"); // "entry-42" | null
matchesAnchorHash("#entry-42", "entry"); // true

anchorHref takes (loc: { origin; pathname }, prefix, id), so it works with a real Location or any { origin, pathname } shape.

Server / SSR entry

The /server subpath is DOM-free string helpers safe on the server, edge, or in build scripts:

import { anchorTargetCss, scrollToHashScript } from "@evancnavarro/anchor-highlight/server";

Exports

anchorId, anchorHref, anchorHashPrefix, elementIdFromHash, matchesAnchorHash, isAnchorSafeId, anchorTargetCss, scrollToHashScript, and type AnchorTargetCssOptions.

License

MIT © Evan C. Navarro