Anchored heading

Add and ID to headings and a link to go directly to that anchor, for sharing or bookmarking, with automatic ID generation from text if an ID is not provided.

Usage

String content

Pass a string as a child element to slugify it as the ID of the element.

// Input
<AnchoredHeading level="h1">
  Foo bar
</AnchoredHeading>

// Output
<h1 id="foo-bar">
  <a href="#foo-bar">Foo bar</a>
</h1>

JSX content

Pass an ID explicitly when the content is JSX.

// Input
<AnchoredHeading id="my-id" level="h3">
  <Icon />Foo bar
</AnchoredHeading>

// Output
<h3 id="my-id">
  <a href="#my-id">
    <Icon />Foo bar
  </a>
</h3>

Level shortcuts

Use the convenience shortcuts to get the desired heading level in a shorter format.

// Input
<H2>Section 1</H2>
<H3>Subsection 1a</H3>

// Output
<h2 id="section-1">
  <a href="#section-1">Section 1</a>
</h2>
<h3 id="subsection-1a">
  <a href="#subsection-1a">Subsection 1a</a>
</h3>

Smooth scrolling

Add this to your global CSS file to enable smooth scrolling.

// Regular CSS
:root {
  scroll-behavior: smooth;
}

// Using Tailwind
@layer base {
  :root {
    @apply scroll-smooth;
  }
}

Installation