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!