New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,436
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-info
An addon to Storybook that allows for display of Markdown files in assorted languages.
npm install storybook-addon-info
Last updated almost 4 years ago
2
Downloads per week
Readme View on GitHub

Storybook Addon Info

An addon to Storybook that allows for display of Markdown files.

Framework Support

Screenshot

Why

In building out component libraries, there may arise a need to display functional requirements for each component. This addon will allow you to pass in a Markdown file and display it within the the addons area/.

Getting Started

Install:

npm i -D storybook-addon-info

Then, add following content to .storybook/addons.js

import 'storybook-addon-info/register';

In the .storybook/config.js file, import the withCode decorator.

import { withInfo } from 'storybook-addon-info';

addDecorator(withInfo);

Now, you can use the info parameter to add a note to each story. This parameter accepts a raw version of a Markdown file.

raw-loader is installed with this package in order to load the file contents as a string.

Note: Using a !! before a request will disable all loaders specified in the configuration. This will allow for the contents to be passed as a string.

import info from '!!raw-loader!./README.md';

storiesOf('Button', module).add(
  'Default',
  () => {
    return <Button>Hello Button</Button>
  },
  {
    info: info,
  }
);
Join the community
6,319 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI