useStorybook - 提供者 & hook

此外掛程式提供一個裝飾器和 hook，用於在渲染樹中的任何位置使用目前活動 story 的 storyContext 和 storyFn。 當您想要檢查 story 內容，或在工具函式或事件追蹤中使用 storyContext 的部分時，它特別有用。

安裝

使用 NPM 或 Yarn 進行安裝

yarn add @alexanderjeurissen/use-storybook

或

npm install --save @alexanderjeurissen/use-storybook

基本用法

提供了一個 HOC，使將提供者掛接到您的 stories 中盡可能無縫

在 ./storybook/preview.js 中將 HOC 新增為裝飾器

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

addDecorator(withStoryContext);

在 story 渲染樹中的任何位置使用提供的 hook

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 元件提供的完全相同。