@geometricpanda/storybook-addon-iframe

Storybook Addon iFrame

Using @geometricpanda/storybook-addon-iframe you're able to embed external content through a tab in the Storybook toolbar.

Installation

NPM:

npm install @geometricpanda/storybook-addon-iframe --save

Yarn:

yarn add @geometricpanda/storybook-addon-iframe

Configuration

In your .storybook/main.js you'll need to load @geometricpanda/storybook-addon-iframe into Storybook:

// .storybook/main.js
module.exports = {
  stories: [],
  addons: ['@geometricpanda/storybook-addon-iframe'],
};

Optionally, you can define top level config .storybook/preview.js.

// .storybook/preview.js
import { addParameters } from '@storybook/react';

addParameters({
  iframe: {
    url: 'https://www.bing.com',
    timeout: 1000,
  },
});

• iframe.url configures the default iFrame URL, this is optional.
• iframe.timeout configures the Delay before the iFrame has considered not to have loaded , this is optional, defaulting to 10000 (or 10 seconds)

Tip: If you prefer, instead of using the addParameters function, you can also export const parameters containing a full parameters object.

Renaming the Tab

Whilst potentially not the most intuitive way of renaming the tab, you're able to use Storybook's standard previewTabs functionality to rename the tab.

Due to how previewTabs works you may also need to define canvas and storybook/docs/panel in order to maintain the default order of tabs (or configure how you wish).

// .storybook/preview.js
import { addParameters } from '@storybook/react';
import { ADDON_ID as ADDON_IFRAME } from '@geometricpanda/storybook-addon-iframe';

addParameters({
  previewTabs: {
    canvas: {},
    'storybook/docs/panel': {},
    [ADDON_IFRAME]: {
      title: 'External Content',
    },
  },
});

Component Story Format (CSF)

All Stories

The following will configure the iFrame to all components within your Story:

export default {
  title: 'Path/To/MyComponent',
  parameters: {
    iframe: {
      url: 'https://www.bing.com',
    },
  },
};

const Template = () => <h1>Hello World</h1>;

export const FirstComponent = Template.bind({});
export const SecondComponent = Template.bind({});
export const ThirdComponent = Template.bind({});

Individual Stories

You can also selectively add iFrames to each Story:

export default {
  title: 'Path/To/MyComponent',
};

const Template = () => <h1>Hello World</h1>;

export const FirstComponent = Template.bind({});
FirstComponent.parameters = {
  iframe: {
    url: 'https://www.google.com',
  },
};

export const SecondComponent = Template.bind({});
SecondComponent.parameters = {
  iframe: {
    url: 'https://www.bing.com',
  },
};

export const ThirdComponent = Template.bind({});
SecondComponent.parameters = {
  iframe: {
    url: 'https://www.yahoo.com',
    timeout: 5000,
  },
};

MDX

In your mdx documentation you can add iFrames to your stories using the <Meta> component.

import { Meta } from '@storybook/addon-docs/blocks';

<Meta
  title="Path/To/MyComponent"
  parameters={{
    iframe: {
      url: 'https://www.google.com',
    },
  }}
/>;

Known Limitations

Unfortunately due to Browser security concerns when using iFrame content served with the x-frame-options: DENY header, the iFrame won't show the content and will instead show the browser's broken pane window. I did consider trying to resolve this gracefully but ultimately felt it would impair the developer debug experience.