@c8s/toc

Usage

/**
 * As to prepare of using the `Toc`
 * 
 * ```sh
 * yarn add @c8s/toc react @types/react
 * ```
 */
import Toc, {TocItemProps} from '@c8s/toc';

Example

(() => {
  const toc = new Toc();
  const AComponent: React.SFC<TocItemProps<HTMLDivElement>> = props => {
    return (
      <div ref={props.ariaRef} style={{paddingBottom: 1000}}>
        {props.title}
      </div>
    );
  };
  const list = [{title: 'foo'}, {title: 'bar'}, {title: 'baz'}];

  return (
    <Toc.provider toc={toc}>
      <>
        <ul>
          <Toc.consumer>
            {({items}) => {
              return items.map(item => {
                return (
                  <li
                    key={item.title}
                    style={{
                      color: item.selected ? 'orange' : 'inherit',
                    }}
                    onClick={item.scroll}
                  >
                    {item.title}
                  </li>
                );
              });
            }}
          </Toc.consumer>
        </ul>
        <div>{list.map(toc.bind(AComponent))}</div>
      </>
    </Toc.provider>
  )
})();

Contributors

Thanks goes to these wonderful people (emoji key):

純 📖	Aki-Japan 📖

This project follows the all-contributors specification. Contributions of any kind welcome!