https://github.com/kyoncy/react-markdown-heading

Render markdown table of contents as React component.
https://github.com/kyoncy/react-markdown-heading

markdown markdown-toc react react-component typescript

Last synced: about 1 month ago
JSON representation

Render markdown table of contents as React component.

• Host: GitHub
• URL: https://github.com/kyoncy/react-markdown-heading
• Owner: kyoncy
• Created: 2020-10-12T15:57:57.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-02-14T14:34:43.000Z (over 3 years ago)
• Last Synced: 2025-04-17T17:13:12.079Z (about 1 month ago)
• Topics: markdown, markdown-toc, react, react-component, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-markdown-heading
• Size: 1.96 MB
• Stars: 16
• Watchers: 1
• Forks: 1
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-markdown-heading

Render markdown table of contents as React component.

[![npm version](https://badge.fury.io/js/react-markdown-heading.svg)](https://badge.fury.io/js/react-markdown-heading)

[![install size](https://packagephobia.com/badge?p=react-markdown-heading)](https://packagephobia.com/result?p=react-markdown-heading)

[![minified size](https://badgen.net/bundlephobia/min/react-markdown-heading)](https://bundlephobia.com/result?p=react-markdown-heading)

[![minzipped size](https://badgen.net/bundlephobia/minzip/react-markdown-heading)](https://bundlephobia.com/result?p=react-markdown-heading)

[![codecov](https://codecov.io/gh/kyoncy/react-markdown-heading/branch/main/graph/badge.svg?token=SOQUUD4XH1)](https://codecov.io/gh/kyoncy/react-markdown-heading)

## Install

```

npm install react-markdown-heading

```

## How to Use

```jsx

import React from 'react'

import ReactDOM from 'react-dom'

import ReactMarkdownHeading from 'react-markdown-heading'

const markdown = '## h2\n### h3\n#### h4\n### h3\n# h1\n### h3'

render(

   {

      console.log(headingList)

    }}

    liClassName="li"

    activeAnchorClassName="activeAnchor"

  />,

  document.getElementById('root')

)

```



## Option

- **markdown** - `string`, The Markdown source to parse (**required**)

- **ulClassName** - `string`, Class name of the ul tag (optional)

- **liClassName** - `string`, Class name of the li tag (optional)

- **anchorClassName** - `string`, Class name of the anchor tag (optional)

- **hyperlink** - `boolean`, Add hyperlink to text (default `false`)

- **blankSpaceReplaceText** - `string`, Replace blank space in hyperlink to this (default `-`)

- **headingDepth** - `1 | 2 | 3 | 4 | 5 | 6`, Depth of heading to display (default `6`)

- **hyperLinkPrefix** - `string`, Hyperlink prefix (default empty)

- **onChangeHeading** - `(headingList: HeadingType[]) => void`, Change event handler (optional)

- **activeHeading** - `HeadingType[]`, Designate active heading list (optional)

- **activeLiClassName** - `string`, Class name of the active li tag (optional)

- **activeAnchorClassName** - `string`, Class name of the active anchor tag (optional)