Use React Router v6 in your stories
npm install storybook-addon-react-router-v6


!npm
> Use React Router v6 in your stories.
This is the documentation for version 2.x. If you are still using version 1.x, visit v1 documentation.
✅You can now use useStoryElement to inject the story at multiple points.
✅The routing parameter now accept a string, that will be used both as the route path and the location pathname.
Install the package
```
yarn add -D storybook-addon-react-router-v6
Add it to your storybook configuration:
`js
// .storybook/main.ts
export default {
addons: ['storybook-addon-react-router-v6'],
} satisfies StorybookConfig;
`
To add the router to all the stories of a component, simply add it to the decorators array.
Note that parameters.reactRouter is optional, by default the router will render the component at /.
`tsx
import { withRouter } from 'storybook-addon-react-router-v6';
export default {
title: 'User Profile',
render: () =>
decorators: [withRouter],
parameters: {
reactRouter: reactRouterParameters({
location: {
pathParams: { userId: '42' },
},
routing: { path: '/users/:userId' },
}),
},
};
`
To change the config for a single story, you can do the following :
`tsx
import { withRouter } from 'storybook-addon-react-router-v6';
export default {
title: 'User Profile',
render: () =>
decorators: [withRouter],
};
export const FromHomePage = {
parameters: {
reactRouter: reactRouterParameters({
location: {
pathParams: { userId: '42' },
searchParams: { tab: 'activityLog' },
state: { fromPage: 'homePage' },
},
routing: {
path: '/users/:userId',
handle: 'Profile',
},
}),
},
};
`
To wrap all your project's stories inside a router by adding the decorator in your preview.js file.
`ts
// .storybook/preview.js
export default {
decorators: [withRouter],
parameters: {
reactRouter: reactRouterParameters({ ... }),
}
} satisfies Preview;
`
To specify anything related to the browser location, use the location property.
`tsx`
type LocationParameters = {
path?: string | ((inferredPath: string, pathParams: Record
pathParams?: PathParams;
searchParams?: ConstructorParameters
hash?: string;
state?: unknown;
};
If location.path is not provided, the browser pathname will be generated using the joined paths from the routing property and the pathParams.
You can provide a function to path. path
It will receive the joined s from the routing property and the pathParams as parameters. string
If the function returns a , is will be used _as is_. It's up to you to call generatePath from react-router if you need to. undefined
If the function returns , it will fallback to the default behavior, just like if you didn't provide any value for location.path.
You can set routing to anything accepted by createBrowserRouter. storybook-addon-react-router-v6
To make your life easier, comes with some routing helpers :
`tsx`
export const MyStory = {
parameters: {
reactRouter: reactRouterParameters({
routing: reactRouterOutlet(
}),
},
};
The following helpers are available out of the box :
`ts`
reactRouterOutlet(); // Render a single outlet
reactRouterOutlets(); // Render multiple outlets
reactRouterNestedOutlets(); // Render multiple outlets nested one into another
reactRouterNestedAncestors(); // Render the story as an outlet of nested outlets
You can also create your own helper and use the exported type RoutingHelper to assist you :
`ts
import { RoutingHelper } from 'storybook-addon-react-router-v6';
const myCustomHelper: RoutingHelper = () => {
// Routing creation logic
};
`
RouterRoute is basically the native RouteObject from react-router; augmented with { useStoryElement?: boolean }.RouterRoute
If you want to accept a JSX and turn it into a , you can use the exported function castRouterRoute.
Just set { useStoryElement: true } in the routing config object.
Navigation events, loader and actions are logged, for you to better understand the lifecycle of your components.
Version 6.4+ of react-router is required.Storybook > 7
This package aims to support and React > 16`.
✅ Storybook 7.0
✅ React 16
✅ React 17
✅ React 18
If you have an issue with any version, open an issue.
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.