tinytoc v1.0.5
tinytoc
A very simple Table of Contents Generator written in TypeScript. tinytoc generates a table of contents based on h tags (h1, ... ,h6) on the website. Table of contents is ceated by appending a list of items to a specified div on the page. A list can be both ordered and unordered. tinytoc by default creats links to the headings as well. Table of contents is unstyled and its up to the user to make style decisions.
Instalation
npm install tinytocUsage
First create import tinytoc into the project
import TinyToc from 'tinytoc'then create a new instance of TinyToc
const contentSelector = "#content"
const targetSelector = "#toc"
const toc = new TinyToc(contentSelector, targetSelector, {})and finally call generate function which would append Table of Contents to specified div
toc.generate()Configuration and options
tinytoc requires only 2 things to be specified - tocSource (a string with a selector for element which holds content with headings) and tocTarget (a string with a selector for element which should contain the table of contents) tinytoc also accepts a third argument - an optional object holding additional options.
Arguments
| Argument | Type | Required | Default Value | Postion | Explanation |
|---|---|---|---|---|---|
| tocSource | string | true | null | 0 | A selector for element which contains headings. Can be any valid JavaScript querySelector. For example for <div id="blog-post"></div> proper selector would be "#blog-post" |
| tocTarget | string | true | null | 1 | A selector for element should contain table of contents. Can be any valid JavaScript querySelector. For example for <div id="blog-toc"></div> proper selector would be "#blog-toc" |
| options | object | true | null | 2 | An object containing addition optionions specified in the table bellow. None of the options are required, however passing an empty object is required. |
Additional options
| Argument | Type | Required | Default Value | Explanation |
|---|---|---|---|---|
| tags | Array of strings | false | 'h2', 'h3', 'h4', 'h5', 'h6' | An array of tag names which specifies which tags should be selected for table of contents. By default selects all headings except h1 |
| listType | string | false | "ul" | Specifies which type of list to create, can be either "ul" or "ol" |
| linkItems | boolean | false | true | Specifies whether to create links to related headings in table of contents |
Example with additional settings
import TinyToc from 'tinytoc'
const toc = new TinyToc("#blog-post", "#blog-toc", {
tags: ["h3", "h4"],
listType: "ol",
linkItems: false
})
toc.generate()