Table of Contents from Markdown
A component that automatically generates a table of contents from a markdown string.
Introduction
This is a demo of the Table of Contents component. It parses markdown headings and creates a navigation menu.
Features
- Automatic parsing
- Intersection observer support
- Customizable levels
Sub-feature
Details about sub-features. This heading is level 3.
Installation
How to install the component. Just copy the code!
Prerequisites
What you need before installing. React and Tailwind CSS.
Installation
Usage
import { TableOfContentsFromMarkdown } from "@/components/TableOfContentsFromMarkdown"
const markdown = `
# Heading 1
Content...
## Heading 2
More content...
### Heading 3
Even more content...
`
<TableOfContentsFromMarkdown markdown={markdown} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
markdown | string | - | The markdown string to parse for headings. |
className | string | - | Additional classes for the container. |
maxLevel | number | 3 | The maximum heading level to include (1-6). |
minLevel | number | 1 | The minimum heading level to include (1-6). |