@jimdrury/storybook-addons-iframe-pane v0.0.1

@jimdrury/storybook-addons-iframe-pane

What?

This package allows you to load 3rd party content into a Storybook panel via an iFrame.

Why?

When building components using Storybook, it can be helpful to refer to 3rd party documentation such as UX research, or the fantastic Compodoc for Angular.

How?

Firstly you'll need to install the package

$ npm install @jimdrury/storybook-addons-iframe-page --save-dev

Next inside your .storybook/main.js you'll need to register the package in the addons block such as:

// .storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: [
    '@jimdrury/storybook-addons-iframe-pane/register.js',
  ],
};

Configuration

Inside your .storybook/manager.js file you're able to configure the name of the panel which appears:

// .storybook/manager.js

import { addons } from '@storybook/addons';

addons.setConfig({
  iframePane: {
    title: 'YOUR NAME HERE'
  },
});

Usage

Story Wide Usage

The following will load https://www.bing.com within the pane for all stories:

export default {
  title: 'Demo',
  parameters: {
    iframePane: 'https://www.bing.com',
  }
};

export const Heading = () => '<h1>Hello World</h1>';

Individual Usage

The following will load https://www.bing.com within the pane only for the single story:

export default {
  title: 'Demo',
};

export const Heading = () => '<h1>Hello World</h1>';
Heading.story = {
  parameters: {iframePane: 'https://www.bing.com'}
};