storybookjs / addon-queryparams

parameter addon for storybook

@storybook/addon-queryparams

This Storybook addon can be helpful if your components need special query parameters to work the way you want them to. It allows you to mock query params per story so that you can easily reproduce different states of your component.

Getting started

First, install the addon.

$ npx storybook@latest add @storybook/addon-queryparams

In your story, define the query parameters you want to mock via the query special parameter:

import React from "react";
import { Button } from "../Button";

export default {
  component: Button,
  parameters: {
    query: {
      // example of mocking ?greeting="Hello world!"
      greeting: "Hello world!",
    },
  },
};

export const WithMockedSearch = {
  render: () => {
    const urlParams = new URLSearchParams(document.location.search);
    const mockedParam = urlParams.get("greeting");
    return <div>Mocked value: {mockedParam}</div>;
  }
}

Credits

While this addon was part of the Storybook monorepo, it received commits from the following authors:

Andrew Lisowski, Brody McKee, Clément DUNGLER, Filipp Riabchun, Gaëtan Maisse, Gert Hengeveld, Jon Palmer, Lynn Chyi, Michael Shilman, Norbert de Langen, Paul Rosania, Renovate Bot, Tom Coleman, Varun Vachhar, Yann Braga