useStorybook - Provider 与 Hook

此插件提供了一个装饰器和 Hook，用于在渲染树的任何位置消费当前活动故事的 storyContext 和 storyFn。当你想要检查故事内容，或在工具函数或事件跟踪中使用 storyContext 的部分内容时，它特别有用。

安装

使用 NPM 或 Yarn

yarn add @alexanderjeurissen/use-storybook

或

npm install --save @alexanderjeurissen/use-storybook

基本用法

提供了一个高阶组件（HOC），以便尽可能无缝地将 Provider 挂接到你的故事中

将此 HOC 作为装饰器添加到 ./storybook/preview.js 中

import { withStoryContext } from '@alexanderjeurissen/use-storybook';

addDecorator(withStoryContext);

在故事渲染树的任何位置使用提供的 Hook

import { useStorybook } from '@alexanderjeurissen/use-storybook';

export default {
  title: "Components|my-component",
};

export const Default = () => {
  const { storyContext, storyFn } = useStorybook();

  ...
}

高级用法

在某些情况下需要更精细的控制。因此，除了 withStoryContext HOC 外，还可以访问底层的 Provider 和 Context

<StoryProvider

import { StoryProvider } from '@alexanderjeurissen/use-storybook';

addDecorator((storyFn, storyContext) => {
  ...

  return (
    <StoryProvider>
      {storyFn()}
    </StoryProvider>
  );
});

此函数签名与 withStoryContext HOC 提供的完全一致。

StoryContext

import { StoryContext } from '@alexanderjeurissen/use-storybook';

addDecorator((storyFn, storyContext) => {
  ...

  return (
    <StoryContext.Provider value={storyFN, storyContext, ...}>
      {storyFn()}
    </StoryContext.Provider>
  );
});

此 Provider 签名与 <StoryProvider 组件提供的完全一致。