Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @theiliad/tictoc with all npm packages installed. Try it out:

var tictoc = require("@theiliad/tictoc")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@theiliad/tictoc v1.0.7

A framework-agnostic automated table of contents component!

TicTOC NPM package Bundle Size License

A framework-agnostic automated table of contents component! Super simple to use, just provide a content container and another container where the TOC would be mounted, and Voila!

Demo

Checkout the demo page here.

Getting started

Installation:

npm i --save @theiliad/tictoc

Usage

You need to create a div (or any other DOM element) inside of which you'd like the TOC to be mounted (in this case we're using <div id="toc">, as well as another element that includes your content (in this case <div id="article-content">.

import/require:

import TicTOC from "@theiliad/tictoc/index";
import "@theiliad/tictoc/styles.css";

new TicTOC({
  contentContainer: document.getElementById("article-content"),
  mountTo: document.getElementById("toc")
});

In-browser CDN usage:

<link rel="stylesheet" href="https://unpkg.com/@theiliad/tictoc@{VERSION_NUMBER_HERE}/styles.css">
<script src="https://unpkg.com/@theiliad/tictoc@{VERSION_NUMBER_HERE}/index.browser.js"></script>
<script>
  new TicTOC.TicTOC({
    contentContainer: document.getElementById("article-content"),
    mountTo: document.getElementById("toc")
  });
</script>

API Reference

The project is built using Typescript, with minimal dependency usage.

Typedoc generated API references can be found here.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free