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
storybook-addon-smart-knobs-fork
Automatically created knobs for storybook.
npm install storybook-addon-smart-knobs-fork
Last updated about 3 years ago
1
Downloads per week
Readme View on GitHub

Smart knobs addon for Storybook

This Storybook plugin uses @storybook/addon-knobs but creates the knobs automatically based on PropTypes and Flow.

Installation:

npm i storybook-addon-smart-knobs --save-dev

Usage:

import React, { PropTypes } from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'
import { withSmartKnobs } from 'storybook-addon-smart-knobs'

const Button = ({ children, onClick }) => (
  <button onClick={ onClick }>{ children }</button>
)

Button.propTypes = {
  children: PropTypes.node,
  onClick: PropTypes.func
}

storiesOf('Button')
  .addDecorator(withSmartKnobs)
  .addDecorator(withKnobs)
  .add('simple', () => <Button>Smart knobed button</Button>)

Configuration:

This plugin has a peer dependency on babel-plugin-react-docgen . As a result, babel-plugin-react-docgen needs to be added to your Storybook Babel configuration.

For a standard Storybook configuration, add react-docgen to your plugins in an appropriate .babelrc file.

If you have created a webpack.config.js file for Storybook, you may need to configure the plugin in there.

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules[0].use[0].options.plugins = [
    require.resolve('babel-plugin-react-docgen'),
  ]

  return defaultConfig
}
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