Storybook Recoil 插件

用于在 Storybook 中使用 Recoil 的插件 您可以轻松地使用 Recoil 并更新 Storybook 中的值。

安装

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;