Package Exports

react-autolink-heading
react-autolink-heading/dist/index.js
react-autolink-heading/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-autolink-heading) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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!