storybook-react-live

react-live 装饰器用于 Storybook v6+

截图

演示

安装

npm i -D storybook-react-live-decorator

使用方法

// Component.stories.js

import { ReactLiveDecorator } from 'storybook-react-live-decorator';

const code = `() => (
  <Wrapper>
    <Button type="primary" size="large">
      Default
    </Button>
  </Wrapper>
)`;

export const LiveEdit = {
    decorators: [ReactLiveDecorator({ code, scope: { Button, Wrapper } })]
};

ReactLiveDecorator 的属性

所有被 <LiveProvider /> 接受的属性，以及

名称	PropType	描述
code	PropTypes.string	代码字符串
scope	PropTypes.object	作用域对象
theme	PropTypes.object	一个 prism-react-renderer 现有主题或主题对象。查看更多 此处
fontFamily	PropTypes.string	编辑器中使用的 css 字体系列，默认为 monospace
debug	PropTypes.bool	将装饰器中的任何内容都记录到 console.log 中

通过 .storybook/preview.js 全局扩展

向 parameters 对象添加 reactLive 属性。接受：scope 和 theme

const preview = {
    parameters: {
        reactLive: {
            theme: themes.dracula, // import from `prism-react-renderer`
            scope: {Button, Wrapper},
            debug: false,
            fontFamily: 'monospace'
        }
    }
};

export default preview;

:)