Storybook: Provide a handy link directly to iframe content

Created on 26 May 2018  路  7Comments  路  Source: storybookjs/storybook

Sometimes I need to view components in an actual mobile device outside of Storybook.

Having a handy direct link to the iframe content, like

http://mystorybookwebsite.com/iframe.html?selectedKind=Homepage&selectedStory=Default

would be helpful.

feature request ui

Most helpful comment

I created a HOC within the iframe that allows you to "pop out" the current view. But I did that because I did not want to make changes directly to Storybook. A solution where Storybook provides the ability to pop out would be good. However, if you directly load the iframe you lose the state from the knobs, and you need to make a way to get back into Storybook. So there may be a more complete solution here where the iframe isn't actually popped out but the surrounding UI is just hidden. I believe there is already such a feature under ctrl+shift+f (fullscreen), so perhaps the solution here is to make a mobile-friendly UI for what is currently only available to keyboard users by shortcut?

All 7 comments

Looks like a nice feature to have, feel free to send a PR if you have some ideas how to present it in UI

For now you can use full screen mode (ctrl+shift+F, copy current URL)

I created a HOC within the iframe that allows you to "pop out" the current view. But I did that because I did not want to make changes directly to Storybook. A solution where Storybook provides the ability to pop out would be good. However, if you directly load the iframe you lose the state from the knobs, and you need to make a way to get back into Storybook. So there may be a more complete solution here where the iframe isn't actually popped out but the surrounding UI is just hidden. I believe there is already such a feature under ctrl+shift+f (fullscreen), so perhaps the solution here is to make a mobile-friendly UI for what is currently only available to keyboard users by shortcut?

Makes sense to me. I wonder what @ndelangen and @shilman think

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

I will make a bit in the UI for this.

for posterity, looks like it works

ie http://localhost:6001/iframe.html?id=useviewportsize--default

Was this page helpful?
0 / 5 - 0 ratings