@storybook-addons/sync-external-url ·

Sometimes we need to embed storybook on the site and here we face the problem of syncing links between the external site and storybook iframe.

Install

npm i -D @storybook-addons/sync-external-url

Usage

Firstly we need register addon in your storybook:

import '@storybook-addons/sync-external-url/register'

Trigger event from change custom tab

If you have addon with custom tab you can wrap Panel with withFireEvents for triggering event after tab changed:

import React from 'react'
import addons, { types } from '@storybook/addons'
import { withFireEvents } from '@storybook-addons/sync-external-url'

const Panel = withFireEvents(() => <div>Panel content</div>)

addons.register('addon-id', (api) => {
  addons.add('panel-id', {
    type: types.TAB,
    title: 'Tab title',
    route: ({ storyId }) => `/tab/${storyId}`,
    match: ({ viewMode }) => viewMode === 'tab',
    render: ({ active }) => <Panel api={api} active={active} />,
  })
})

Embeded storybook with iframe

After iframe loading we listen post-mesages and update external url also wee load storybook with current query params:

import React from 'react'
import { IframeLoader } from '@storybook-addons/sync-external-url'

export const App = () => (
  <IframeLoader queryPrefix="storybook" frameBorder={0} src="https://your-storyboook.com" />
)

License

Project is MIT licensed.