Anchor heading

The AnchorHeading component defines headings. Specifically, AnchorHeading performs the following:

1. Generates URL fragments corresponding to headings.
2. Formats URL fragments into compatible syntax. For example, a & is replaced with a -.
3. Creates a button to copy the URL at each fragment.
4. Allows heading fragments to be defined separately from the text of the heading itself.

How to use AnchorHeading

import { AnchorHeading } from "~/components";

<AnchorHeading title="How to use AnchorHeading" slug="use-anchorheading" depth={2} />

Markdown files (including partials) have this behavior by default, applied via rehype plugins. Therefore, the AnchorHeading component is usually only required when writing headings yourself inside components, or when working on non-markdown files.

Additionally, AnchorHeading is useful when rendering partial files into one location where there are duplicate headings (for example, when there are multiple H3 corresponding to /#create in one page). AnchorHeading allows you to explicitly define fragments, ensuring that each heading can be referred correctly with unique anchors.

Note

The AnchorHeading component emulates the behavior of the rehype-slug ↗ and the rehype-autolink-headings ↗. It adds an id based on the output of github-slugger ↗ to the heading, as well as adding a button to copy a link to that particular heading.