New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,439
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@utilitywarehouse/storybook-addon-prop-types
Can be used to create better component documentation inside storybook. Based on [React DocGen babel plugin](https://github.com/storybooks/babel-plugin-react-docgen).
npm install @utilitywarehouse/storybook-addon-prop-types
Last updated over 1 year ago
258
Downloads per week
Readme View on GitHub

storybook-addon-prop-types

Can be used to create better component documentation inside storybook. Based on React DocGen babel plugin.

panel screenshot

Getting started

First, intstall the addon and babel plugin.

npm i -D @utilitywarehouse/storybook-addon-prop-types babel-plugin-react-docgen

Add this line to your addons.js file (create this file inside your storybook config directory if needed).

import '@utilitywarehouse/storybook-addon-prop-types/register'

Import the withPropsOf decorator to your stories to add propTypes content for the panel.

import { withPropsOf } from '@utilitywarehouse/storybook-addon-prop-types'
import Radio from './Radio'
...

storiesOf('Foundation|Components', module)
  .addDecorator(withPropsOf(Radio))
  .add('Radio', () => (
    <RadioStoryOne />
  ))

Make sure react-docgen plugin is being used by babel. Either add it to .babelrc or as --plugin react-docgen argument to babel command.

{
  "plugins": ["react-docgen"]
}

More documentation on how react-docgen works can be found in babel-plugin-react-docgen README.

Caveats

  1. If you use docgen plugin with production builds, it will increase the size of your bundle. Make sure to use it only for storybook.
  2. React DocGen only works for propTypes defined in the same file as the component. Component needs to be the default export.
  3. Wrapping component with HOC will erase docgen info, so make sure to use non-wrapped components with withPropsOf.
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