storybook-docs-toc

storybook-docs-toc

Table of contents addon for Storybook Docs.

Get auto generated list of links next to your content.

It uses tocbot under the hood.

Install

npm i -D storybook-docs-toc

Usage

Add this to your preview.js

import { addParameters } from '@storybook/react';
- import { DocsContainer } from '@storybook/addon-docs/blocks';
+ import { withTableOfContents } from 'storybook-docs-toc';

- addParameters({
-    docs: {
-        container: DocsContainer,
-    },
-});

+ addParameters(withTableOfContents());

or if you need more flexibility

import { addParameters } from '@storybook/react';
- import { DocsContainer } from '@storybook/addon-docs/blocks';
+ import React from 'react';
+ import { BackToTop, TableOfContents } from 'storybook-docs-toc';

addParameters({
    docs: {
-        container: DocsContainer,
+        container: props => (
+			    <React.Fragment>
+			  	  <TableOfContents />
+			  	  <DocsContainer {...props} />
+			  	  <BackToTop />
+			    </React.Fragment>
+		    ),          
    },
});