Markdown-Navbar
A React component renders an interactive navbar panel of Markdown docs for your blog or website.
Features
Implement some regular functions easily by using this component, such as:
- Display the structure tree of your article defined by the headings.
- Render anchors that navigate to specific headings in the article.
- Share one URL to readers to navigate to a specific area of the article.
Install
yarn add markdown-navbar # or `npm i markdown-navbar --save`
Quickstart
import React from 'react';import ReactDOM from 'react-dom';// One third-part component for render markdown documentationimport ReactMarkdown from 'react-markdown';import MarkdownNavbar from 'markdown-navbar';// The default style of markdown-navbar should be imported additionallyimport 'markdown-navbar/dist/navbar.css'; const article = `# Markdown-Navbar Demo ## Chicken Chicken Chicken Chicken Chicken Chicken Chicken. * Chicken Chicken Chicken Chicken Chicken.* Chicken Chicken Chicken Chicken Chicken.* Chicken Chicken Chicken Chicken Chicken. ### Chicken Chicken Chicken Chicken Chicken Chicken Chicken Chicken. #### Chicken Chicken Chicken Chicken Chicken Chicken Chicken Chicken Chicken Chicken.`; { return <div ="App"> <div ="article"> <ReactMarkdown = /> </div> <div ="navigation"> <MarkdownNavbar = /> </div> </div> ;} ReactDOM;
Tips
- The component only parses article headings at level 2 and below. The article title, which is usually used once in an article, will not appear in the navigation bar.
- The component needs to be used in conjunction with your article content. When using this component, you must ensure that your article under the same page content.
- Please confirm that every heading of your markdown document is different by each other when the value of property
declarative
is setted astrue
.
Props
Property | Data Type | Default Value | Description |
---|---|---|---|
className | string | "" | The className that defines the outermost container of navbar |
source | string | "" | Markdown text content |
headingTopOffset | number | 0 | Anchor displacement relative to the top of the window (for the anchor jump) |
updateHashAuto | boolean | true | Automatically update the hash value of browser address when page scrolling if true |
declarative | boolean | false | Use the text of the title from Markdown content as the hash value for the anchor if true |
ordered | boolean | true | Whether the title contains a numerical prefix, such as: 1. 2. 2.2 |
onNavItemClick | function | (event, element, hashValue) => {} | The event callback function after clicking navbar item |
onHashChange | function | (newHash, oldHash) => {} | The event callback function before the hash value of browser address changing |