styledsea

TOC

Table of Content

A Table of Contents with active anchor observer and auto scroll.

Usage

import * as Base from 'styledsea-docs-core/toc';
 
return (
  <Base.AnchorProvider>
    <Base.ScrollProvider>
      <Base.TOCItem />
      <Base.TOCItem />
    </Base.ScrollProvider>
  </Base.AnchorProvider>
);

Anchor Provider

Watch for the active anchor using the Intersection API.

PropTypeDefault
toc
TableOfContents
-
single
boolean
true
children
ReactNode
-

Scroll Provider

Contains all TOC items. It automatically scrolls to the active anchor.

PropTypeDefault
containerRef
RefObject<HTMLElement>
-
children
ReactNode
-

TOC Item

The item to jump to the anchor.

Data AttributeValuesDescription
data-activetrue, falseIs anchor active

Last updated on

On this page

Edit on GitHub