TableOfContents is a JavaScript library that generates a table of contents based on the headings in a given HTML element. It allows you to easily create a hierarchical structure of the document's headings and provides an automatically generated table of contents for navigation.
You can install TableOfContents via npm:
npm install ts-tocTo use TableOfContents, follow these steps:
-
Import the
TableOfContentsclass:import { TableOfContents } from 'ts-toc';
-
Create an instance of
TableOfContentsby passing the target element and optional configuration options:const toc = new TableOfContents({ el: document.getElementById('content'), // Target element for generating the table of contents attributes: ['h1', 'h2', 'h3', 'h4'], // Array of heading tags to include in the table of contents ulClassName: 'appendix' // Optional class name for the generated unordered list });
-
Call the
init()method to generate and append the table of contents to the document:toc.init();
-
Customize the table of contents appearance using CSS as desired.
Here's a basic example of using TableOfContents:
<body>
<div id="content">
<h1 id="header1">Header 1</h1>
<h2 id="header2">Header 2</h2>
<h3 id="header3">Header 3</h3>
<h2 id="header4">Header 4</h2>
</div>
<script type="module">
import { TableOfContents } from 'ts-toc';
const toc = new TableOfContents({
el: document.getElementById('content')
});
toc.init();
</script>
</body>This will generate a table of contents based on the headings (h1, h2, h3, h4) within the #content element.
The TableOfContents constructor accepts an options object with the following properties:
-
el(required): The target element for generating the table of contents. Must be an HTML element. -
attributes(optional): An array of heading tags to include in the table of contents. Defaults to['h1', 'h2', 'h3', 'h4']. -
ulClassName(optional): The class name to be added to the generated unordered list element. Defaults to'appendix'.
This project is licensed under the MIT License.
If you encounter any issues or have suggestions, please open an issue.
TableOfContents is developed and maintained by Ahmad Ahandani.