Slick TOC

Easily generate dynamic tables of contents!

Usage

Basic

import { useSlickToc } from "@killeencode/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

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