storybook-fetch-addon

用于从 API 获取数据的 Storybook 插件

安装

npm i --save-dev storybook-fetch-addon

设置

// In addons.js

import 'storybook-fetch-addon/register';

// In config.js

import { addDecorator, addParameters } from '@storybook/react';
import { withFetch } from 'storybook-fetch-addon';

addDecorator(withFetch);

addParameters({
  fetch: {
     // Required:
    fetch: param => fetch(`https://my-api.com?id=${param}`),

    // Optional:
    map: data => { 
      // transform data from api
      return props;
    },
    valid: value => { 
      // Validate value
      return valid;
    },
    defaultProps: {
      return { /* default props */ };
    }
  }

API

fetchSingle

(id, component, defaultValue) => Component

• id：标识项目的字符串。
• component：将传递获取的 props 的 React 组件。
• defaultValue：可选字符串，用作获取数据的默认值。

fetchList

(items, component) => Component

• items：id/defaultValue 对的数组。默认值是可选的。
• component：将传递所有项目的获取的 props 的 React 组件。

示例

import { fetchSingle, fetchList } from 'storybook-fetch-addon';

storiesOf('My Component')
  .add('single', () => fetchSingle(
    'Item 1', 
    ({ props, loaded, error }) => <MyComponent {...props} />,
    'default value'
  ))
  .add('list', () => fetchList(
    [
      ['Item 1', 'default 1'],
      ['Item 2', 'default 2']
    ],
    ({ items }) => (
      <ul>
        {items.map(({ props, loaded, error }) => <MyComponent key={props.id} {...props} />)}
      </ul>
    )
  ));