New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Table of contents
Table of contents addon for Storybook Docs
npm install storybook-docs-toc
Last updated 10 months ago
10.1k
Downloads per week
Readme View on GitHub

Storybook Docs Table of contents addon

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

Be aware that styled-components is a peer dependency.

Usage

Add this to your preview.js file

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

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

+ addParameters(withTableOfContents());

or if you need more flexibility

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

export const parameters = {
    docs: {
-        container: DocsContainer,
+        container: ({ children, ...rest }) => (
+            <React.Fragment>
+                <DocsContainer {...rest}>
+                    <TableOfContents className="sbdocs sbdocs-toc--custom" />
+                    {children}
+                    <BackToTop className="sbdocs sbdocs-top--custom" />
+                </DocsContainer>
+            </React.Fragment>
+        ),
    },
};

Configuration

You can override the default selectors for tocbot via the config prop on DocsContainerHOC or TableOfContents. These also take a custom title.

Customization

Some CSS custom properties are available to customize the styles of the table of contents, and the back to top button.

.sbdocs.sbdocs-toc--custom {
  --toc-color: #202020;
  --toc-background: #fff;
  --toc-indicator-color: #efefef;
  --toc-indicator-color--active: #fbd476;
}

.sbdocs.sbdocs-top--custom {
  --toc-button-color: #66bf3cff;
  --toc-button-color--hover: #66bf3ccc;
  --toc-button-color--active: #66bf3caa;
  --toc-button-background: #e7fdd8ff;
  --toc-button-background--hover: #e7fdd8cc;
  --toc-button-background--active: #e7fdd8aa;
}
Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI