Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-queryparams
addon to mock queryparams in storybook
npm install @storybook/addon-queryparams
Last updated 16 days ago
26.2k
Downloads per week
Made by Storybook
Readme 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

Join the community
6,562 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI