Skip to content

kyoncy/react-markdown-heading

Repository files navigation

react-markdown-heading

Render markdown table of contents as React component.

npm version install size minified size minzipped size codecov

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')
)

screen shot

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)