html-TOC

A lightweight and customizable npm package to extract a table of contents from your page

Usage

This package is provided as a npm package, but it should works even with plain javascript.

To install using npm

npm i @samuele1818/html-toc

To install using yarn

yarn add @samuele1818/html-toc

Let's see an example of how to use the library. In the example we use ReactJs.

App.js

import getTOC from "html-toc"
import {useEffect} from "react";

function App() {
    useEffect(() => {
        // Select only h1-h3 headings
        const headings = ['h1', 'h2', 'h3'];

        // Call the function and pass custom headings range
        const tocElement = getTOC({headings});

        // Log the toc to see if library works
        console.log(tocElement)
    }, [])


    return (
        <div>
            <h1>I'm an header - the first</h1>
            <h2>I'm a sub header - the first</h2>
            <h3>I'm a sub header - the second</h3>
            <h4>I'm a sub header - the second</h4>
            <h5>I'm a sub header - the second</h5>
            <h6>I'm a sub header - the second</h6>

            <h1>I'm an header - the second</h1>
            <h1>I'm an header - the third</h1>
            <h1>I'm an header - the fourth</h1>
            <h1>I'm an header - the fifth</h1>
        </div>
    );
}

Now let see the result in console.

<nav>
    <ol>
        <ol>
            <li>I'm an header - the first</li>
            <ol>
                <li>I'm a sub header - the first</li>
                <ol>
                    <li>I'm a sub header - the second</li>
                </ol>
            </ol>
        </ol>
        <li>I'm an header - the second</li>
        <li>I'm an header - the third</li>
        <li>I'm an header - the fourth</li>
        <li>I'm an header - the fifth</li>
    </ol>
</nav>

The tocElement is an HTML element that can be inserted in our page, so for example

import getTOC from "html-toc"

const tocElement = getTOC();

// Add the toc element to the body
document.body.appendChild(tocELement)

Contributing

I will create a guide soon

Licence

This package is under MIT license, feel free to do whatever you want with the code of this library