0.0.8 • Published 2 years ago
react-autolink-heading v0.0.8
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-headingor pnpm
pnpm i react-autolink-headingUsage
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!