Skip to content

Headless React hook to create dynamic Table of Contents

License

Notifications You must be signed in to change notification settings

KilleenCode/slick-toc

Repository files navigation

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