Storybook 擴充套件 Recoil

在 Storybook 中使用 Recoil 的擴充套件 您可以輕鬆地在 Storybook 中使用 Recoil 並更新值。

安裝

yarn add -D storybook-addon-recoil
# or
pnpm add -D storybook-addon-recoil

然後，將其註冊為 .storybook/preview.ts 中的擴充套件。

// .storybook/preview.ts

import { withRecoil } from 'storybook-addon-recoil';

export const decorators = [..., withRecoil];

使用方式

使用此擴充套件的主要方式是定義 recoil 參數。您可以在元件層級執行此操作，如下所示，以影響檔案中的所有故事，或者您可以為單一故事執行此操作。

// Button.stories.ts

import type { Meta } from '@storybook/react';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    recoil: {
      user: {
        name: "Jane Doe",
        age: 27,
      },
    },
  }
};

export default meta;