@sak1sham/react-toc-highlight v1.2.0

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)

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

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