加入直播会议:周四,美国东部时间上午 11 点,Storybook 9 发布及 AMA

一个 storybook.js 插件,提供 React story 的实时编辑和预览功能

在 Github 上查看

storybook-addon-react-live-edit

DEMO

安装

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

配置 Storybook

要在你的 Storybook 中使用此插件,你需要注册面板、addLiveSource story 创建器,并可选地添加一个 scope decorator,以便在实时编辑器的作用域中提供额外的组件和工具函数。

注册面板

添加到 .storybook/addons.js

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

注册 addLiveSource story 创建器

添加到 .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 story decorator

将 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 添加到特定的 stories

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 用于从字符串形式的源代码添加 story。该源代码可以在“实时编辑”面板中进行编辑。

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

你可以使用 withLiveEdit story 创建器

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

API

addLiveSource

addLiveSource(name, source[, scope]) 
  • name (字符串,必需) - story 的名称
  • source (字符串,必需) - 用于在预览中渲染并在“实时编辑”面板中编辑的 story 源代码
  • scope (对象,可选) - 提供给渲染 story 的变量,这些可以是额外的组件、工具函数或任何其他数据。此 scope 将与所有之前由 withLiveEditScope decorators 提供的变量合并。

withLiveEdit

withLiveEdit(source[, scope]) 
  • source (字符串,必需) - 用于在预览中渲染并在“实时编辑”面板中编辑的 story 源代码
  • scope (对象,可选) - 提供给渲染 story 的变量,这些可以是额外的组件、工具函数或任何其他数据。此 scope 将与所有之前由 withLiveEditScope decorators 提供的变量合并。

withLiveEditScope decorator

withLiveEditScope(scope)
  • scope (对象,必需) - 提供给渲染 story 的变量,这些可以是额外的组件、工具函数或任何其他数据。此 scope 将与所有之前由 withLiveEditScope decorators 提供的变量合并。React 应在 scope 对象中导入并提供。

示例

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

yarn example