react-interactive-toc

🧭 An auto-generating, interactive Table of Contents (TOC) component for React. Includes scroll spy, smooth scrolling, and support for nested headings.

✨ Features

• Parses <h1> to <h3> (customizable) automatically
• Highlights current section as you scroll
• Smooth scrolling on click
• Fully customizable styles
• Works with static content or dynamic rendering

📦 Installation

npm install react-interactive-toc

or

yarn add react-interactive-toc

🛠 Usage

import React from 'react';
import InteractiveTOC from 'react-interactive-toc';

function App() {
  return (
    <div style={{ display: 'flex', gap: '2rem' }}>
      <aside style={{ width: '300px' }}>
        <InteractiveTOC containerSelector="#main-content" />
      </aside>
      <main id="main-content">
        <h1>Introduction</h1>
        <p>...</p>
        <h2>Getting Started</h2>
        <p>...</p>
        <h2>Features</h2>
        <h3>Scroll Spy</h3>
        <h3>Smooth Scroll</h3>
        <p>...</p>
        <h2>Conclusion</h2>
      </main>
    </div>
  );
}

export default App;

⚙️ Props

| Prop | Type | Default | Description | |------------------|----------|-----------|-----------------------------------------------| | containerSelector | string | "body" | CSS selector for the main content container. | | minHeading | number | 1 | Minimum heading level to include (e.g., h1). | | maxHeading | number | 3 | Maximum heading level to include (e.g., h3). |

🎨 Styling

The component uses minimal inline styles for layout and highlighting. You can wrap it in your own styled container or customize buttons using class names or inline overrides.

📚 License

MIT License

👤 Author

Made with ❤️ by [Fidgetspin]