New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,605
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 hirsch-storybook-docs-toc
Last updated about 1 month ago
138
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

Take a look at this Storybook as demo

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,898 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI