LogoLogo
GitHub repository
GitHub repository
    Documentation
  • Overview
  • Getting Started

  • Guides

  • Hooks

  • Components

    • AsyncButton
    • AsyncIconButton
    • CodeBlock
    • CopyButton
    • Enumeration
    • ExampleCard
    • Icon
    • InlineCode
    • Logo
    • PageLoadingIndicator
    • PageOverview
    • Paragraph
    • QuoteBlock
    • SmartImage
    • SmartLink
    • StyleLink

PageOverview

Retrieves all headings (h1, h2, h3, h4, h5, h6) with an id from the page and generates the overview (table of contents).

Props

  • children: The children of the component, potentially including a number of headings with an id.
  • onOverviewChange: A callback function that is called when the overview is generated. The overview is passed as an argument to the callback function.

Examples

Table of contents

Some body.

h1 title

Another h1 title

Some other body.

h2 title

h3 title

Another h2 title

h2 title without id

Loading...
1function TocGeneration() {
2  const [pageOverview, setPageOverview] = useState<Overview | null>(null);
3
4  const sectionToString = (section: Overview["sections"][number], depth: number): string => {
5    const indent = "  ".repeat(depth);
6    const subSections = section.subSections
7      .map((sub) => sectionToString(sub, depth + 1));
8    return deindent`
9      ${indent}level ${section.level}: #${section.id}
10      ${subSections.join("")}
11    `;
12  };
13
14  return (
15    <Box>
16      <PageOverview onOverviewChange={setPageOverview}>
17        <Box border="1px solid red">
18          <Paragraph body id="some-text">Some body.</Paragraph>
19          <Paragraph h1 id="h1-title">h1 title</Paragraph>
20          <Paragraph h1 id="another-h1-title">Another h1 title</Paragraph>
21          <Paragraph body id="some-other-text">Some other body.</Paragraph>
22          <Paragraph h2 id="h2-title">h2 title</Paragraph>
23          <Paragraph h3 id="h3-title">h3 title</Paragraph>
24          <Paragraph h2 id="another-h2-title">Another h2 title</Paragraph>
25          <Paragraph h2>h2 title without id</Paragraph>
26        </Box>
27      </PageOverview>
28    
29      <Paragraph body>
30        <InlineCode whiteSpace="pre">
31          {pageOverview == null
32            ? "Loading..."
33            : pageOverview.sections.map(s => sectionToString(s, 0))}
34        </InlineCode>
35      </Paragraph>
36    </Box>
37  );
38}
1function TocGeneration() {
2  const [pageOverview, setPageOverview] = useState<Overview | null>(null);
3
4  const sectionToString = (section: Overview["sections"][number], depth: number): string => {
5    const indent = "  ".repeat(depth);
6    const subSections = section.subSections
7      .map((sub) => sectionToString(sub, depth + 1));
8    return deindent`
9      ${indent}level ${section.level}: #${section.id}
10      ${subSections.join("")}
11    `;
12  };
13
14  return (
15    <Box>
16      <PageOverview onOverviewChange={setPageOverview}>
17        <Box border="1px solid red">
18          <Paragraph body id="some-text">Some body.</Paragraph>
19          <Paragraph h1 id="h1-title">h1 title</Paragraph>
20          <Paragraph h1 id="another-h1-title">Another h1 title</Paragraph>
21          <Paragraph body id="some-other-text">Some other body.</Paragraph>
22          <Paragraph h2 id="h2-title">h2 title</Paragraph>
23          <Paragraph h3 id="h3-title">h3 title</Paragraph>
24          <Paragraph h2 id="another-h2-title">Another h2 title</Paragraph>
25          <Paragraph h2>h2 title without id</Paragraph>
26        </Box>
27      </PageOverview>
28    
29      <Paragraph body>
30        <InlineCode whiteSpace="pre">
31          {pageOverview == null
32            ? "Loading..."
33            : pageOverview.sections.map(s => sectionToString(s, 0))}
34        </InlineCode>
35      </Paragraph>
36    </Box>
37  );
38}