@storybook-addons/docs ·

Documentation layout for official @storybook/addon-docs with the ability to embed examples and placeholders.

Install

npm i -D @storybook-addons/docs @storybook/addon-docs

Usage

1. Add @storybook/addon-docs into addons in main.js file:

module.exports = {
  addons: ['@storybook/addon-docs'],
}

2. Set DocsPage in preview.js file:

import { addParameters } from '@storybook/react'
import { DocsPage } from '@storybook-addons/docs'

addParameters({
  docs: {
    container: DocsPage,
  },
})

3. Add documentation for your story:

import documentation from './Component.md'

export default {
  title: 'Controls/Component',
  parameters: {
    docs: {
      readme: documentation,
    },
  },
}

Params

Option	Description	Default
enableNavigation	Show navigation at right sidebar	true
readme	Documentation content
placeholders	Object with placeholder which should be replaced

Markdown syntax

Inline stories

Your can embeded single or multipile stories (with tabs) in documentation:

<!-- single story -->

{{%story::story-id%}}

<!-- multi stories with tab names -->

{{%story::tabName:story-id|tabName:story-id%}}

Placeholders

If necessary you can embedded placeholder for example other part of documentation:

{{%inject::placeholderName%}}

License

Project is MIT licensed.