- Notifications
You must be signed in to change notification settings - Fork6
Light weight react component for creating a table of contents from the given markdown text⚡⚡
License
K-Sato1995/react-toc
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
- The idea is that you can automatically create a customizable table of contents from your markdown text.
- It's regex based. Thus, managed to keep the bundle size pretty tiny.(Check it out onBUNDLEPHOBIA)
npm install --save react-toc
or
yarn add react-toc
Import Toc from the package and pass props to it. As for now,markdownText is the only required prop.
importReactfrom"react";importTocfrom"react-toc";constExample=()=>{constyourMarkdownText="# test \n your markdown Content # test2\n";return<TocmarkdownText={yourMarkdownText}/>;};exportdefaultExample;
| Name | Type | Description |
|---|---|---|
markdownText | string | Required The markdown text you want to creat a TOC from. |
titleLimit | number | The maximum length of each title in the TOC. |
highestHeadingLevel | number | The highest level of headings you want to extract from the given markdownText. |
lowestHeadingLevel | number | The lowest level of headings you want to extract from the given markdownText. |
className | strig | Your custom className. |
type | "deafult" or"raw" | The type of a TOC you want to use. |
customMatchers | { [key: string]: string } | The matchers you want to use to replace the letters with. |
PassclassName like the code below.
importReactfrom"react";importTocfrom"react-toc";constExample=()=>{constyourMarkdownText="# test \n your markdown Content # test2\n";return<TocmarkdownText={yourMarkdownText}className={"customClassName"}/>;};exportdefaultExample;
Now you can style your custom class just like the code below.
.customClassName {border: solid1px;}.customClassName>li {padding-bottom:10px;}
You can use thecustomMatchers prop to replace letters in your toc.For instance, if you want to replace? or! with- in your list, you can simply do this.
importReactfrom"react";importTocfrom"react-toc";constExample=()=>{constyourMarkdownText="# test \n your markdown Content # test2\n";constmatchers={"[?!]":"-"}return<TocmarkdownText={yourMarkdownText}className={"customClassName"}customMatchers={matchers}/>;};exportdefaultExample;
You can also give more options to thecustomMatchers prop like the code below.
importReactfrom"react";importTocfrom"react-toc";constExample=()=>{constyourMarkdownText="# test \n your markdown Content # test2\n";constmatchers={"[?!]":"-","\\*":""}return<TocmarkdownText={yourMarkdownText}className={"customClassName"}customMatchers={matchers}/>;};exportdefaultExample;
- Install dev dependencies.
$ yarn install- Test
$ yarn test- Lint
$ yarn lint- Run demo locally
$ cd demo && yarn && yarn startAbout
Light weight react component for creating a table of contents from the given markdown text⚡⚡
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Contributors5
Uh oh!
There was an error while loading.Please reload this page.