storybook-addon-react-live-edit

安装

yarn add -D storybook-addon-react-live-edit

配置 Storybook

要将此插件添加到您的 Storybook 中，您需要注册面板，addLiveSource 故事创建器，以及可选地添加一个作用域装饰器，以在实时编辑器作用域中提供其他组件和实用程序。

注册面板

添加到 .storybook/addons.js

import 'storybook-addon-react-live-edit/dist/register';

注册 addLiveSource 故事创建器

添加到 .storybook/config.js

import {setAddon} from '@storybook/react';
import LiveEdit, {setOptions} from 'storybook-addon-react-live-edit';

setOptions({ theme: 'darcula', presets: ['react'] });

setAddon(LiveEdit);

添加 withLiveEditScope 故事装饰器

将 addDecorator 添加到 .storybook/config.js

import {addDecorator} from '@storybook/react';
import {withLiveEditScope} from 'storybook-addon-react-live-edit';

import ExternalComponent from 'a-apackage';

addDecorator(withLiveEditScope({ ExternalComponent }));

或

将 addDecorator 添加到特定故事

import {withLiveEditScope} from 'storybook-addon-react-live-edit';
import ExternalComponent from 'a-apackage';

storiesOf("Demo", module)
  .addDecorator(withLiveEditScope({ React, ExternalComponent }))
  .addLiveSource('demo', `return <div>{scopeTest}</div>`);

使用

当 LiveEdit 插件使用 Storybook 的 setAddon 函数注册时，会添加一个新的方法 addLiveSource 来添加来自字符串提供的源代码的故事。此源代码可以在“实时编辑”面板中编辑。

storiesOf("Demo", module)
  .addLiveSource('demo', `return <div>{scopeTest}</div>`);

或

您可以使用 withLiveEdit 故事创建器

storiesOf("Demo", module)
  .add('demo', withLiveEdit(`return <div>{scopeTest}</div>`));

API

addLiveSource

addLiveSource(name, source[, scope]) 

• name (字符串，必填) - 故事名称
• source (字符串，必填) - 在预览中呈现并在“实时编辑”面板中可供编辑的故事源代码
• scope (对象，可选) - 提供给渲染的故事的变量，这些变量可以是额外的组件、实用程序或任何其他数据。作用域与之前由 withLiveEditScope 装饰器提供的变量合并。

withLiveEdit

withLiveEdit(source[, scope]) 

• source (字符串，必填) - 在预览中呈现并在“实时编辑”面板中可供编辑的故事源代码
• scope (对象，可选) - 提供给渲染的故事的变量，这些变量可以是额外的组件、实用程序或任何其他数据。作用域与之前由 withLiveEditScope 装饰器提供的变量合并。

withLiveEditScope 装饰器

withLiveEditScope(scope)

• scope (对象，必填) - 提供给渲染的故事的变量，这些变量可以是额外的组件、实用程序或任何其他数据。作用域与之前由 withLiveEditScope 装饰器提供的变量合并。React 应该被导入并在作用域对象中提供。

示例

要运行提供的示例，请执行以下命令，Storybook 将在端口 3000 上运行。

yarn example