New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
iFrame
A Storybook addon which allows you to add iFrames to Stories
npm install @geometricpanda/storybook-addon-iframe
Last updated 5 months ago
2k
Downloads per week
Readme View on GitHub

npm version

Storybook Addon iFrame

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

Screenshot of Storybook

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.

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI