@govuk-frederic/table-of-contents

TableOfContents

Import

  import TableOfContents from '@govuk-frederic/table-of-contents';

Usage

Simple

<TOC.Container>
  <TOC.Index>
    {
      ({ contents }) =>
        <ul>
          {
            contents.map(
              ({ id, title }) => <li key={id}><a href={`#${id}`}>{title}</a></li>
            )
          }
        </ul>
    }
  </TOC.Index>
  <TOC.Section id="first" title="First">
    <h2>First</h2>
    <p>
      Section content goes here
    </p>
  </TOC.Section>
  <TOC.Section id="second" title="Second">
    <h2>Second</h2>
    <p>
      Section content goes here
    </p>
  </TOC.Section>
</TOC.Container>