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

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

import React from 'react' import PropTypes from 'prop-types' 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(options)) .addDecorator(withKnobs) .add('simple', () => <Button>Smart knobed button</Button>) Options

ignoreProps

Type: Array

Will not automatically create knobs for props whose name is in this array. Example:

.withSmartKnobs({ ignoreProps: ['numberProp'] }) .add('example', () => <div numberProp={date('date', date)} />) 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 } Typescript:

Use react-docgen-typescript-loader to generate docgen info from Typescript types. This docgen info will be used to automatically create knobs.