@sak1sham/react-toc-highlight
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

react-toc

NPM npm bundle size npm MIT

Overview

  • 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 on BUNDLEPHOBIA)

Image from Gyazo

Demo

Check out the demo page.

Installation

npm install --save react-toc

or

yarn add react-toc

Usage

Import Toc from the package and pass props to it. As for now, markdownText is the only required prop.

import React from "react";
import Toc from "react-toc";

const Example = () => {
  const yourMarkdownText = "# test \n your markdown Content # test2\n";
  return <Toc markdownText={yourMarkdownText} />;
};

export default Example;

Props

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.

CustomDesign

Add a custom className

Pass className like the code below.

import React from "react";
import Toc from "react-toc";

const Example = () => {
  const yourMarkdownText = "# test \n your markdown Content # test2\n";
  return <Toc markdownText={yourMarkdownText} className={"customClassName"} />;
};

export default Example;

Style the custom class

Now you can style your custom class just like the code below.

.customClassName {
  border: solid 1px;
}
.customClassName > li {
  padding-bottom: 10px;
}

Custom Matchers

You can use the customMatchers prop to replace letters in your toc. For instance, if you want to replace ? or ! with - in your list, you can simply do this.

import React from "react";
import Toc from "react-toc";

const Example = () => {
  const yourMarkdownText = "# test \n your markdown Content # test2\n";
  const matchers = { "[?!]": "-" }

  return <Toc markdownText={yourMarkdownText} className={"customClassName"} customMatchers={matchers}/>;
};

export default Example;

You can also give more options to the customMatchers prop like the code below.

import React from "react";
import Toc from "react-toc";

const Example = () => {
  const yourMarkdownText = "# test \n your markdown Content # test2\n";
  const matchers = { "[?!]": "-", "\\*": "" }

  return <Toc markdownText={yourMarkdownText} className={"customClassName"} customMatchers={matchers}/>;
};

export default Example;

Development

  • Install dev dependencies.
$ yarn install
  • Test
$ yarn test
  • Lint
$ yarn lint
  • Run demo locally
$ cd demo && yarn && yarn start

License

MIT

Package Sidebar

Install

npm i @sak1sham/react-toc-highlight

Weekly Downloads

1

Version

1.2.0

License

MIT

Unpacked Size

70.5 kB

Total Files

13

Last publish

Collaborators

  • sak1sham