Ability to pass URL parameters to stories

See original GitHub issue

Is your feature request related to a problem? Please describe. We’re using URL parameters in many of our components, e.g ?mock=true. However, storybook (v5.0.2) discards all the additional URL parameters I am giving to it.

Describe the solution you’d like The best solution would be if the user-defined URL parameters of the storybook would be automatically added to the iframe of the story. For example, it could be something like ?user-mock=true. Which would be added to the iframe of the story as ?mock=true.

If that’s not possible, it would be nice if storybook at least wouldn’t delete the unknown url parameters, as it does now. Then I could perhaps access from the story via parent.window.location or something like that.

Describe alternatives you’ve considered Without URL option, I would have to use cookies or something along these lines 😦

Are you able to assist bring the feature to reality? Maybe…

Issue Analytics

State:
Created 5 years ago
Reactions:8
Comments:24 (12 by maintainers)

Top GitHub Comments

3reactions

tmeasdaycommented, Mar 17, 2019

Did we use to pass the URL from the manager to the preview unmodified?

@vitalybe I am curious about the use case here. I assume your components read from the URL directly? How do you go about setting the URL? Do you have to manually change it when you look at certain stories?

Perhaps we could have an addon that sets the preview URL query parameters based on a story parameter? Maybe that is a nicer solution?

.add(‘story’, () => ..., { query: { foo: “bar” } })

1reaction

ndelangencommented, Jun 11, 2019

@vitalybe an option for an alternative would be addon-context, and reading the mock boolean from there. You’d be able to switch mocking on and off from the storybook UI.

I understand if that’s not really feasible. I second @tmeasday’s suggestion of an queryParameters addon that would read parameters.query and change the url accordingly before calling the storyFn.

Top Results From Across the Web

An SEO Guide to URL Parameter Handling

URL parameters create duplicate content, waste crawl budget, and dilute ranking signals. Learn six ways to avoid potential SEO issues with ...

Documentation / URL params handling - Page ⋅ Storybook

Handling of URL params It is enabled by default. This enables to send links of your website to another persons and they will...

when i tried to add new parameter in url it override my that ...

Try passing the url as encoded one encodeURIComponent('http://localhost:35475/?path=/story/simple-usage--client-demo&test=123'). like this

Query params Addon | Storybook: Frontend workshop for UI ...

Query params Addon | Storybook: Frontend workshop for UI development. Storybook is a frontend workshop for building UI components and pages in isolation. ......

Pass Parameters to URL - SuiteRep

We can pass custom data into the URL whenever the user is redirected to that record. In the parameters option, you will need...