Storybook Addon React View

Storybook 擴充功能，讓您的 Story 原始碼具有互動性 Storybook Addon React View。

範例：https://jmarceli.github.io/storybook-addon-react-view/ 範例程式碼：docs-source

安裝

如果您需要將其新增至您的 Storybook，您可以執行

npm i -D storybook-addon-react-view

設定

然後，將以下內容新增至 .storybook/main.js

module.exports = {
  addons: ["storybook-addon-react-view"],
};

使用方式

簡單範例

import React from "react";
import { Component, ABC, myFun } from "./Component";
import { withReactView } from "storybook-addon-react-view/register";

export const ComponentStory: React.FC<{}> = () => (
  <Component title="X">
    <div>{ABC}</div>
    <div>{myFun()}</div>
  </Component>
);

export default {
  title: "Component",
  component: Component,
  decorators: [withReactView],
  parameters: { useView: { scope: { Component } } },
};

或與 @storybook/addon-docs 一起使用

import React from "react";
import { Component, ABC, myFun } from "./Component";
import { withReactView } from "storybook-addon-react-view/register";

export const ComponentStory: React.FC<{}> = () => (
  <Component title="X">
    <div>{ABC}</div>
    <div>{myFun()}</div>
  </Component>
);

export default {
  title: "Component",
  component: Component,
  decorators: [withReactView],
  parameters: { useView: { scope: { Component, ABC, myFun } } },
};

授權條款

MIT

作者

Jan Grzegorowski