New
Community Showcase #5Visual test with Chromatic
Star78,967
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-axios
Axios inspection for storybook
npm install storybook-axios
Last updated over 2 years ago
2.1k
Downloads per week
Readme View on GitHub

storybook-axios

Logo

Storybook addon to inspect axios network requests.

UI

Demo

Check out the demo

Tech

Created using React, axios and antd

Installation

npm install storybook-axios

Configure

Add addon "storybook-axios" in .storybook/main.js

module.exports = {
    stories: [
        '../srcv2/**/*.stories.mdx',
        '../srcv2/**/*.stories.@(js|jsx|ts|tsx)',
    ],
    addons: [
        '@storybook/addon-essentials',
        '@storybook/addon-notes/register',
        '@storybook/addon-a11y',
        '@whitespace/storybook-addon-html',
        'storybook-axios/register'
    ],

add a decorator in .storybook/preview.js and pass in the axios instance which is used in your app.

import withAxiosDecorator from 'storybook-axios';
import { getAxios } from '../utils/get-axios';

export const parameters = {
    actions: { argTypesRegex: "^on[A-Z].*" },
}

export const decorators = [withAxiosDecorator(getAxios())];

Note best way is to have an axios helper library, which creates a single instance and reuses it everywhere in the app. The decorator adds interceptors to that axios instance in order to listen for network requests.

Example

UI

Todos

[x] Make it work with FormData

Join the community
6,191 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI