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 裝飾器提供的所有變數合併。React 應匯入並在範圍物件中提供。

範例

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

yarn example