Automatically created knobs for storybook.
npm install storybook-addon-smart-knobsThis 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
`js
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.propTypes = {
children: PropTypes.node,
onClick: PropTypes.func
}
storiesOf('Button')
.addDecorator(withSmartKnobs(options))
.addDecorator(withKnobs)
.add('simple', () => )
`
- ignoreProps
Type: Array
Will not automatically create knobs for props whose name is in this array. Example:
`js`
.withSmartKnobs({ ignoreProps: ['numberProp'] })
.add('example', () => )
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.
- README | babel-plugin-react-docgen
- Custom Babel Config | Storybook.
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
}
``
Use react-docgen-typescript-loader to generate docgen info from Typescript types. This docgen info will be used to automatically create knobs.