gitdocs/themes/default/toc/page.js

Easy to use, SEO-friendly, beautiful documentation that lives in your git repo.

import React from 'react'
import PropTypes from 'prop-types'
import { PageItem } from './styles'

const Toc = (props) => {
  // Don't show this if there aren't enough headers
  if (props.items.length < 2) return null

  // Create TOC hierarchy and link to headers
  const items = props.items.map(t => (
    <li key={`${props.items}-${t.slug}`}>
      <a href={`#${t.slug}`}>
        {t.content}
      </a>
    </li>
  ))

  return (
    <PageItem sticky={props.sticky}>
      <div>
        <h5>Table of Contents</h5>
        <ul>{items}</ul>
      </div>
    </PageItem>
  )
}

Toc.defaultProps = {
  items: [],
}

Toc.propTypes = {
  items: PropTypes.array,
}

export default Toc