@govuk-frederic/table-of-contents

Construction kit to build a table of contents - uses Context API.

Stats

StarsIssuesVersionUpdatedCreatedSize
@govuk-frederic/table-of-contents
0.2.03 years ago3 years agoMinified + gzip package size for @govuk-frederic/table-of-contents in KB

Readme

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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.