@storybook-addons/sync-external-url
v1.1.4
Published
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.
Downloads
4
Readme
@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.