useStorybook - 提供程序和钩子

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

安装

使用 NPM 或 Yarn

yarn add @alexanderjeurissen/use-storybook

或

npm install --save @alexanderjeurissen/use-storybook

基本用法

提供了一个 HOC，使将提供程序挂钩到您的故事尽可能无缝。

在 ./storybook/preview.js 中添加 HOC 作为装饰器。

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

addDecorator(withStoryContext);

在故事渲染树的任何位置使用提供的钩子。

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

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

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

  ...
}

高级用法

在某些情况下，需要更细粒度的控制。因此，除了 withStoryContext HOC 之外，还可以访问底层提供程序和上下文。

<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>
  );
});

此提供程序签名正是 <StoryProvider 组件提供的。