react-markdown-heading

Render markdown table of contents as React component.

Install

npm install react-markdown-heading

How to Use

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(
  <ReactMarkdownHeading
    markdown={markdown}
    hyperlink={true}
    onChangeHeading={(headingList) => {
      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)