Sanity-table-of-contents NPM

Sanity Table of Contents Component

A lightweight and configurable table of contents component for Sanity.io and Next.js websites, built with React and TypeScript.

✨ Features

📚 Automatic Heading Extraction from PortableText content
🎯 Scroll Spy highlights current section
🖱 Smooth Scrolling to sections
🎨 Customizable UI with TailwindCSS
📱 Responsive Design with dropdown variant

💻 Demo

Live Demo

🚀 Installation

npm install sanity-table-of-contents
# or
yarn add sanity-table-of-contents

🛠 Usage

Basic Implementation

// components/table-of-contents.tsx
"use client";

import { SanityTableOfContents } from "sanity-table-of-contents";
import { PortableTextBlock } from "@portabletext/types";

export default function TableOfContents({ content }: { content: PortableTextBlock[] }) {
  return (
    <SanityTableOfContents 
      value={content}
      title="Table of Contents"
      className="sticky top-4"
    />
  );
}

📌 Props

`<SanityTableOfContents />`

Prop	Type	Required	Description
`value`	`PortableTextBlock \| PortableTextBlock[]`	✅	PortableText content to extract headings from
`title`	`string`	❌	Title for the table of contents
`className`	`string`	❌	Custom class for styling
`variant`	`"default" \| "dropdown"`	❌	Display variant (default or dropdown)

📜 License

🌟 Contributions

PRs and feedback are welcome! 🚀

sanity sanity-table-of-contents table-of-contents nextjs table-of-contents react typescript tailwindcss cms blog blog-table-of-contents

@portabletext/types react tailwindcss

1.0.0

5 months ago