FranciscoMoretti / react-autolink-heading

A component that adds heading links (#heading-name) based on the heading text content ("Heading Name")

React AutolinkHeading

AutolinkHeading is a React component that enhances your headings with automatic anchor links, making navigation within long documents a breeze.

Just like rehype-autolink-headings but for React.

Features

• Automatically generates anchor links for headings.
• Customizable class names and ARIA labels.
• Works with various levels of headings (h1 - h6).
• Lightweight and easy to integrate.

Install

Install the package via npm:

npm install react-autolink-heading

or pnpm

pnpm i react-autolink-heading

Usage

import React from 'react';
import { AutolinkHeading } from 'autolink-heading';

function MyComponent() {
  return (
    <div>
      <AutolinkHeading className="my-heading" linkClassName="my-link">
        <h2>My Header Title</h2>
      </AutolinkHeading>
      {/* Add more AutolinkHeading components as needed */}
    </div>
  );

Props

Prop	Type	Description
children	ReactNode	The heading element(s) to enhance with anchor links.
className	string	Additional class name(s) for the heading element.
linkClassName	string	Additional class name(s) for the anchor link.
ariaLabel	string	ARIA label for the anchor link (default: 'Link to section').
headingId	string	Manually set the heading ID for the anchor link.

License

This project is licensed under the MIT License.

---

If you find AutolinkHeading helpful, consider giving it a ⭐️ on GitHub!