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;