AutoTOC API

Overview

AutoTOC is an NPM package for automatically generating and managing table of contents with scroll highlighting for web content

CodePen Demo

API Documentation

Getting Started

To initiate, install AutoTOC using NPM:

npm i @danielhaim/autotoc

Module Example

import AutoToc from "@danielhaim/autotoc";

document.addEventListener("DOMContentLoaded", function () {
    const tocOptions = {
        contentSelector: "article",
        navigationContainer: "nav",
        tocTitle: "Table of Contents",
        tocIcon: '<i class="your-icon-class"></i>',
        highlightOffset: 100,
        headingDepthLimit: 4
    };

    // Appends to Top
    const externalLinksTop = [
        { id: "external-link1", text: "Custom Top Link 1" },
        { id: "external-link2", text: "Custom Top Link 2" }
    ];

    // Appends to Bottom
    const externalLinksBottom = [
        { id: "external-link3", text: "Custom Bottom Link 3" },
        { id: "external-link4", text: "Custom Bottom Link 4" }
    ];

    try {
        const tocGenerator = new AutoToc.Generate(
            ...Object.values(tocOptions)
        );

        tocGenerator.addExternalLinksToToc(externalLinksTop, "top", "level-0");
        tocGenerator.addExternalLinksToToc(externalLinksBottom, "bottom", "level-0");
        tocGenerator.initialize();
    } catch (error) {
        console.error("An error occurred:", error.message);
    }
});