How to set query parameter in storybook?

Member

by gilbert , in category: Javascript , 9 months ago

How to set query parameter in storybook?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by mallory_cormier , 9 months ago

@gilbert 

To set query parameters in Storybook, you can use the addParameters method provided by Storybook. Here's an example of how you can set query parameters:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// in your stories file (e.g. MyComponent.stories.js)

import { addParameters } from '@storybook/react';

addParameters({
  query: {
    // set query parameters here
    foo: 'bar',
    baz: 'qux'
  }
});


In this example, the query object contains the query parameters that you want to set. You can add as many key-value pairs as needed. These query parameters will be applied to all stories within the Storybook instance.


You can also set query parameters at the individual story level using the parameters option:

1
2
3
4
5
6
7
8
9
export default {
  title: 'MyComponent',
  parameters: {
    query: {
      foo: 'bar',
      baz: 'qux'
    }
  }
};


With these configurations in place, when you run Storybook, the query parameters foo=bar and baz=qux will be included in the URL.