In this post, I'll show you how to generate a Table of Contents (TOC) from a Markdown string in a React application using TypeScript. The idea is to extract headings from your Markdown content and create a TOC that users can click to navigate through the document.

We'll use a npm utility i created, markdown-table-of-content, to handle the heavy lifting. This utility provides a React component, TableOfContent, which automatically generates the TOC from your Markdown text. Also, we can use a function getTocMarkdownText to get the TOC as a Markdown string.

npm install markdown-table-of-content

Example

Here's an example of how you might use it. First, define your Markdown content:

const markdownText = `
# Title of the Document

## Introduction

Some introduction text.

### Subsection 1

Details about Subsection 1.

## Another Section

Additional content.

### Subsection 2

Details about Subsection 2.
`;

TableOfContent

You can then use the TableOfContent component to render the TOC directly in your React app:

import { TableOfContent } from "markdown-table-of-content";

const TocWithinReactComponent: React.FC = () => {
  return (
    <div className="App">
      <h1>Table of Contents Example</h1>
      <TableOfContent markdownText={markdownText} />
    </div>
  );
};

getTocMarkdownText

If you prefer the TOC as a Markdown string, for example, to insert back into your content, you can use getTocMarkdownText:

import { getTocMarkdownText } from "markdown-table-of-content";

const TocTextUsage: React.FC = ({ article }: { article: Article }) => {
  const articleMarkdown = article.content;
  const articleTableOfContent = getTocMarkdownText(markdownText);
  const content = articleTableOfContent + "\n\n" + articleMarkdown;
  return <Markdown className="markdown-preview">{content}</Markdown>;
};

This approach gives you flexibility: render the TOC in the DOM or generate it as Markdown. Both are straightforward to implement and integrate into your React projects.

Output

The TOC can be formatted either as:

Markdown List

- [Title of the Document](#title-of-the-document)
  - [Introduction](#introduction)
    - [Subsection 1](#subsection-1)
  - [Another Section](#another-section)
    - [Subsection 2](#subsection-2)

React DOM

<ul>
    <li><a href="#title-of-the-document">Title of the Document</a></li>
    <li style={{ marginLeft: '20px' }}><a href="#introduction">Introduction</a></li>
    <li style={{ marginLeft: '40px' }}><a href="#subsection-1">Subsection 1</a></li>
    <li style={{ marginLeft: '20px' }}><a href="#another-section">Another Section</a></li>
    <li style={{ marginLeft: '40px' }}><a href="#subsection-2">Subsection 2</a></li>
</ul>

That's it! You now have a dynamic TOC that can be easily integrated into your React apps, keeping your content organized and easy to navigate.