react-markdown-heading
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.0 • Public • Published

    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)

    Install

    npm i react-markdown-heading

    DownloadsWeekly Downloads

    463

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    16 kB

    Total Files

    13

    Last publish

    Collaborators

    • kyoncy