Storybook Addon Remix React Router
Use Remix React Router in your stories.
🚨️ The package has been renamed storybook-addon-remix-react-router
🚨
The migration is mandatory to support Storybook 8.
Recent changes
✅ Support for Storybook 8 with storybook-addon-remix-react-router@3
.
✅ 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.
Getting Started
Install the package
npm i -D storybook-addon-remix-react-router
Add it to your storybook configuration:
// .storybook/main.ts
export default {
addons: ['storybook-addon-remix-react-router'],
} satisfies StorybookConfig;
Decorate all stories of a component
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 /
.
import { withRouter } from 'storybook-addon-remix-react-router';
export default {
title: 'User Profile',
render: () => <UserProfile />,
decorators: [withRouter],
parameters: {
reactRouter: reactRouterParameters({
location: {
pathParams: { userId: '42' },
},
routing: { path: '/users/:userId' },
}),
},
};
Decorate a specific story
To change the config for a single story, you can do the following :
import { withRouter } from 'storybook-addon-remix-react-router';
export default {
title: 'User Profile',
render: () => <UserProfile />,
decorators: [withRouter],
};
export const FromHomePage = {
parameters: {
reactRouter: reactRouterParameters({
location: {
pathParams: { userId: '42' },
searchParams: { tab: 'activityLog' },
state: { fromPage: 'homePage' },
},
routing: {
path: '/users/:userId',
handle: 'Profile',
},
}),
},
};
Decorate all stories, globally
To wrap all your project's stories inside a router by adding the decorator in your preview.js
file.
// .storybook/preview.js
export default {
decorators: [withRouter],
parameters: {
reactRouter: reactRouterParameters({ ... }),
}
} satisfies Preview;
Location
To specify anything related to the browser location, use the location
property.
type LocationParameters = {
path?: string | ((inferredPath: string, pathParams: Record<string, string>) => string | undefined);
pathParams?: PathParams;
searchParams?: ConstructorParameters<typeof URLSearchParams>[0];
hash?: string;
state?: unknown;
};
Inferred path
If location.path
is not provided, the browser pathname will be generated using the joined path
s from the routing
property and the pathParams
.
Path as a function
You can provide a function to path
.
It will receive the joined path
s from the routing property and the pathParams
as parameters.
If the function returns a string
, is will be used as is. It's up to you to call generatePath
from react-router
if you need to.
If the function returns undefined
, it will fallback to the default behavior, just like if you didn't provide any value for location.path
.
Routing
You can set routing
to anything accepted by createBrowserRouter
.
To make your life easier, storybook-addon-remix-react-router
comes with some routing helpers :
export const MyStory = {
parameters: {
reactRouter: reactRouterParameters({
routing: reactRouterOutlet(<MyOutlet />),
}),
},
};
Routing Helpers
The following helpers are available out of the box :
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 :
import { RoutingHelper } from 'storybook-addon-remix-react-router';
const myCustomHelper: RoutingHelper = () => {
// Routing creation logic
};
RouterRoute
is basically the native RouteObject
from react-router
; augmented with { useStoryElement?: boolean }
.
If you want to accept a JSX and turn it into a RouterRoute
, you can use the exported function castRouterRoute
.
Use the story as the route element
Just set { useStoryElement: true }
in the routing config object.
Dedicated panel
Navigation events, loader and actions are logged, for you to better understand the lifecycle of your components.
Compatibility
Version 6.4+
of react-router
is required.
This package aims to support Storybook > 7
and React > 16
.
✅ Storybook 8.0
✅ Storybook 7.0
✅ React 18
✅ React 17
✅ React 16
If you have an issue with any version, open an issue.
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.
License
This package is released under the Apache 2.0 license.