Read the query param on storybook (@storybook/addon-queryparams)

[gloriaJun]

@storybook/addon-queryparams

리액트에서 query param을 받아서 동작을 해야하는 경우 해당 애드온을 사용하여 쿼리 파람을 조작하여 사용할 수 있다. 단, 이 경우에는 react route의 location을 이용하여 읽어들이면 안되고 window.location을 통하여 읽어들여야 한다. (왜 react router loation의 값에는 해당 파람이 반영안되는 지는 아직 모르겠음)

Installation

npm install --save-dev @storybook/addon-queryparams

Usage

import React from 'react';

import { withQuery } from '@storybook/addon-queryparams';

//...SKIP

export default {
  title: 'custom',
  component: CustomComponent,
  decorators: [withQuery],
  parameters: {
    query: {
      mock: 'Hello world!',
    },
  },
};

export const WithMockedSearch = () => {
  const urlParams = new URLSearchParams(document.location.search);
  const mockedParam = urlParams.get('mock');
  return <CustomComponent>;
};