storybook-addon-queryparams

addon to mock queryparams in storybook

View on Github

@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

Made by
  • yannbf
    yannbf
  • kasperpeulen
    kasperpeulen
  • valentinpalkovic
    valentinpalkovic
  • jreinhold
    jreinhold
  • shilman
    shilman
  • ndelangen
    ndelangen
Work with
    Angular
    Ember
    HTML
    Preact
    React
    React native
    Svelte
    Vue
    Web Components
Tags