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 全域擴充

將 reactLive 屬性新增至 parameters 物件。接受：scope 和 theme

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

export default preview;

:)