storybook-addon-react-live-edit
安装
yarn add -D storybook-addon-react-live-edit
配置 storybook
要在你的 Storybook 中使用此插件,你需要注册面板、addLiveSource
故事创建器,并可以选择性地添加一个作用域装饰器 (scope decorator),以便在实时编辑器作用域中提供额外的组件和实用工具。
注册面板
添加到 .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>`);
用法
当使用 storybook 的 setAddon
函数注册 LiveEdit 插件后,会新增一个 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
(string, 必需) - 故事名称source
(string, 必需) - 在预览中渲染并在“实时编辑”面板中可供编辑的故事源scope
(object, 可选) - 提供给渲染的故事的变量,这些可以是额外的组件、实用工具或任何其他数据。作用域会与之前通过withLiveEditScope
装饰器提供的所有变量合并。
withLiveEdit
withLiveEdit(source[, scope])
source
(string, 必需) - 在预览中渲染并在“实时编辑”面板中可供编辑的故事源scope
(object, 可选) - 提供给渲染的故事的变量,这些可以是额外的组件、实用工具或任何其他数据。作用域会与之前通过withLiveEditScope
装饰器提供的所有变量合并。
withLiveEditScope
装饰器
withLiveEditScope(scope)
scope
(object, 必需) - 提供给渲染的故事的变量,这些可以是额外的组件、实用工具或任何其他数据。作用域会与之前通过withLiveEditScope
装饰器提供的所有变量合并。React 应该被导入并提供在 scope 对象中。
示例
要运行提供的示例,请执行以下命令,Storybook 将在端口 3000 上运行
yarn example