Storybook Addon React View

使您的故事源代码交互式的 Storybook 附加组件 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