React Runner Storybook 插件

Storybook 插件，提供由 react-runner 驱动的 React 实时预览，尝试 在线示例

安装

# Yarn
yarn add storybook-addon-react-runner

# NPM
npm install --save storybook-addon-react-runner

然后将插件添加到 .storybook/main.js 中的配置

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

配置

通过将以下内容添加到 .storybook/preview.js 中来配置 scope 等

import * as components from "../your-components";

export const parameters = {
  reactRunner: {
    disable, // whether to disable the addon
    scope: {
      ...components,
      ...otherScope,
    },
    wrapper, // pass a React Component to have it rendered around the story
    language, // defautls to `jsx`, set to `tsx` to support typescript
    theme, // https://github.com/FormidableLabs/prism-react-renderer#theming
    readOnly, // code editor will be readonly if set to `true`
  },
};

您可以根据 故事或组件 更改配置

注意：如果您通过全局参数设置 scope，HMR（热模块替换）将无法工作，将会执行完全重新加载

用法

以您喜欢的方式或使用源代码直接编写您的故事

export const Source = {
  parameters: {
    storySource: {
      source: `<Button label="Source code" />`,
    },
  },
};

或者甚至使用 import 语句的真实示例

import ButtonStory from "./Button.story";
import ButtonStorySource from "!!raw-loader!./Button.story";

export const Complex = ButtonStory;
Complex.parameters = {
  storySource: {
    source: ButtonStorySource,
  },
  reactRunner: {
    // you can define your scope in `.storybook/preview.js`
    scope: {
      import: {
        react: React,
        "./Button": { Button },
      },
    },
  },
};

Button.story.js

import { useState } from "react";
import { Button } from "./Button";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>{count}</div>
      <Button label="+" onClick={() => setCount((count) => count + 1)} />
      <Button label="-" onClick={() => setCount((count) => count - 1)} />
    </>
  );
}

装饰器

此插件仅适用于全局装饰器，对于组件或故事装饰器，您可以使用 wrapper 作为替代

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    reactRunner: {
      wrapper: YourProvider,
    },
  },
};