Js-toc NPM | npm.io

js-toc

A JavaScript plugin that automatically creates a dynamic, SEO-friendly table of contents from headings in a document.

js-toc offers a suite of powerful features designed to enhance your documentation and articles:

📑 Dynamic Table of Contents: Automatically generates a fully functional table of contents based on your document's headings.
🌐 SEO Friendly: Adds anchor links to improve navigation and optimize SEO.
🧭 Smooth Scrolling: Smoothly scrolls to sections, including automatic scrolling to the current anchor when the page is loaded.
🔢 Automatic Numbering: Automatically assigns hierarchical numbers to sections, enhancing clarity.
📐 Optional Indentation: Customizable indentation levels to reflect the structure of your document visually.
♿ Enhanced Accessibility: Improves accessibility by providing a clear structure for easier navigation.
💼 Professional Look: Gives your content a professional, organized appearance, enhancing usability.
📂 Collapsible Sections: Features an easy-to-use toggle to collapse or expand the table of contents, making large documents more manageable.
📏 Customizable Options: Easily customize various features such as TOC height, numbering, indentation, and more for greater flexibility and control.

js-toc

Installation

Install using npm:

npm install js-toc

Install using yarn:

yarn add js-toc

Usage

In HTML file

<!-- Add this where you want the table of contents to appear -->
<div id="toc" class="toc-container">
    <div class="toc-title">Table of Contents</div>
</div>

In JS file

// Import the plugin
import 'js-toc'

// Initialize the table of contents
document.querySelector('article').toc({
  tocSelector: '#toc',
  tocIndent: true,
  tocNumber: true,
  smooth: true,
  maxHeight: '70vh',
})

Options

You can customize the behavior of the table of contents by passing an options object to the toc() method. The following options are available:

Option	Default	Description
`tocSelector`	`'#toc'`	Specifies the selector for the container where the table of contents will be rendered.
`maxHeight`	`'75vh'`	Sets the maximum height for the TOC container, making it scrollable if the content exceeds the height.
`activeClass`	`'js-toc-active'`	Specifies the class name for the currently active TOC item as the user scrolls through the document.
`tocIndent`	`true`	Indents the TOC items based on their heading levels.
`tocNumber`	`true`	Automatically adds numbers to each TOC item according to its hierarchy.
`smoothScroll`	`true`	Enables smooth scrolling to the clicked TOC item.
`autoOpen`	`true`	Automatically opens the TOC on page load. If set to `false`, the TOC will start in a collapsed state.