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