Slick TOC

Easily generate dynamic tables of contents!

Usage

Basic

import { useSlickToc } from "slick-toc";

const App = () => {
  const [register, TableOfContents] = useSlickToc();

  return (
    <main>
      <h2>Table of Contents</h2>
          { TableOfContents }
      <section {...register("About")}>
        <h2>About</h2>
      </section>
      <section {...register("Contact")}>
        <h2>Contact</h2>
      </section>
    </main>
  );
};

Customize Components

import { useSlickToc } from "slick-toc";

const App = () => {
  const [register, TableOfContents] = useSlickToc({
    ListContainer: MyCustomContainer
    ListItem: MyCustomItem
  });

  return (
    <main>
      <h2>Table of Contents</h2>
        { TableOfContents }
      <section {...register('About')}>
        <h2>About</h2>
      </section>
      <section {...register('Contact')}>
        <h2>Contact</h2>
      </section>
    </main>
  )
}

Todo

• Add Context

Development

• npm i -g pnpm
• pnpm i
• pnpm dev

Changesets

Generate changesets with pnpm changeset