React Router v6
Use React Router v6 in your stories
npm install storybook-addon-react-router-v6
8k
Downloads per week

Storybook Addon React Router v6

Storybook npm Release

Use React Router v6 in your stories.

Recent changes

โœ… withRouter decorator parameters now accept { routeState: Location.state }
โœ… Support for React 18 (learn more)

Getting Started

Install the package

yarn add -D storybook-addon-react-router-v6

Add it to your storybook configuration:

// .storybook/main.js
module.exports = {
    addons: ["storybook-addon-react-router-v6"],
};

How to use it as a component decorator

To add the router to all the stories of a component, simply add it to the decorators array.

Note that the parameters.reactRouter property is optional, by default the router will render the component at /.

import { withRouter } from 'storybook-addon-react-router-v6';

export default {
  title: 'User Profile',
  component: UserProfile,
  decorators: [withRouter],
  parameters: {
    reactRouter: {
      routePath: '/users/:userId',
      routeParams: { userId: '42' },
    }
  }
};

export const Example = () => <UserProfile />;

Usage at the story level

If you want to change the router config just for one story you can do the following :

import { withRouter } from 'storybook-addon-react-router-v6';

export default {
  title: 'User Profile',
  component: UserProfile,
  decorators: [withRouter],
};

export const Example = () => <UserProfile />;
Example.story = {
  parameters: {
    reactRouter: {
      routePath: '/users/:userId',
      routeParams: { userId: '42' },
      searchParams: { tab: 'activityLog' },
      routeState: { fromPage: 'homePage' },
    }
  }
};

Define a global default

If you want you can wrap all your stories inside a router by adding the decorator in your preview.js file.

// preview.js

export const decorators = [withRouter];

// you can also define global defaults parameters
export const parameters = {
  reactRouter: {
    // ...
  }
}

Compatibility

This package aims to support Storybook > 6.4 and React > 16. Storybook versions prior 6.4 are very likely to work, I just didn't test them.

If you have an issue with any version, open an issue.

โœ… Storybook 6.4
โœ… Storybook 6.5

โœ… React 16
โœ… React 17
โœ… React 18

Contribution

Contributions are welcome.

Before writing any code, file an issue to showcase the bug or the use case for the feature you want to see in this addon.