https://github.com/gopherlabsltd/tictoc

A framework-agnostic automated table of contents component! ✨
https://github.com/gopherlabsltd/tictoc

javascript toc typescript

Last synced: about 2 months ago
JSON representation

A framework-agnostic automated table of contents component! ✨

• Host: GitHub
• URL: https://github.com/gopherlabsltd/tictoc
• Owner: GopherLabsLtd
• License: mit
• Created: 2019-05-04T03:39:39.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-11T01:54:46.000Z (over 5 years ago)
• Last Synced: 2024-04-23T20:05:58.793Z (8 months ago)
• Topics: javascript, toc, typescript
• Language: TypeScript
• Homepage: https://tictoc.netlify.com/
• Size: 260 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# TicTOC [![NPM package](https://img.shields.io/npm/v/@theiliad/tictoc.svg)](https://www.npmjs.com/package/@theiliad/tictoc) ![Bundle Size](https://img.shields.io/badge/bundle%20size-<3kb-brightgreen.svg) [![License](https://img.shields.io/npm/l/@theiliad/tictoc.svg)](https://github.com/GopherLabsLtd/ticTOC/blob/master/LICENSE.md)

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](https://tictoc.netlify.com/).



## Getting started

### Installation:

```bash

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 `
`, as well as another element that includes your content (in this case `
`.


**import/require:**

```js

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:**

```html

  new TicTOC.TicTOC({

    contentContainer: document.getElementById("article-content"),

    mountTo: document.getElementById("toc")

  });

```

## API Reference

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

Typedoc generated API references can be found [here](https://tictoc.netlify.com/api-reference).