storybook-addon-react-live-edit

安裝

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

設定 Storybook

要讓此擴充套件在您的 Storybook 中生效，您必須註冊面板、addLiveSource Story 建立器，並選擇性地新增一個範圍裝飾器，使其他元件和工具在即時編輯器範圍內可用

註冊面板

新增至 .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 裝飾器

將 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 新增至特定的 Story

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 的變數，這些可以是額外的元件、工具或任何其他資料。範圍會與先前由 withLiveEditScope 裝飾器提供的所有變數合併。

withLiveEdit

withLiveEdit(source[, scope]) 

• source (字串，必填) - Story 原始碼，將在預覽中渲染，並可在「即時編輯」面板中編輯
• scope (物件，選填) - 提供給渲染 Story 的變數，這些可以是額外的元件、工具或任何其他資料。範圍會與先前由 withLiveEditScope 裝飾器提供的所有變數合併。

withLiveEditScope 裝飾器

withLiveEditScope(scope)

• scope (物件，必填) - 提供給渲染 Story 的變數，這些可以是額外的元件、工具或任何其他資料。範圍會與先前由 withLiveEditScope 裝飾器提供的所有變數合併。應該在 scope 物件中匯入並提供 React。

範例

要執行提供的範例，請執行以下命令，Storybook 將在 3000 埠上執行

yarn example