# @samuele1818/html-toc

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

Latest version **1.0.1** (published 2023-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @samuele1818/html-toc
pnpm add @samuele1818/html-toc
yarn add @samuele1818/html-toc
bun add @samuele1818/html-toc
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-08-09 |
| First published | 2023-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sam1818 |
| Maintainers | tsgsamu18 |
| Keywords | toc, contents, table, mdx, markdown, md, html |

## Links

- npm: https://www.npmjs.com/package/@samuele1818/html-toc
- Repository: https://github.com/Samuele1818/html-toc
- npm.io page: https://npm.io/package/@samuele1818/html-toc

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-08-09
- 1.0.0 — 2023-08-09

## README

# 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

```bash
npm i @samuele1818/html-toc
```

To install using yarn

```bash
yarn add @samuele1818/html-toc
```

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

App.js

```jsx
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.

```jsx
<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

```jsx
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

---
_Source: https://npm.io/package/@samuele1818/html-toc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._