Usage with Storybook? #952
Replies: 5 comments 9 replies
-
Currently with Storybook I get this error on most stories: ReferenceError: Cannot access 'Root' before initialization |
Beta Was this translation helpful? Give feedback.
-
I would like to know how to use Storybook as well. I think a plugin would be great, or simply a working solution how to create the router context for stories that you can display components which includes any API of the router |
Beta Was this translation helpful? Give feedback.
-
I'm interested to know if there are any workaround/solutions to render the |
Beta Was this translation helpful? Give feedback.
-
Here's what I created: Storybook fake Tanstack router - Gist |
Beta Was this translation helpful? Give feedback.
-
Here is what I've done import type {PartialStoryFn, StoryContext} from '@storybook/types';
import {createMemoryHistory, createRootRoute, createRoute, createRouter, RouterProvider} from '@tanstack/react-router';
export default function withRouter(Story: PartialStoryFn, {parameters}: StoryContext) {
const {initialEntries = ['/'], initialIndex, routes = ['/']} = parameters?.router || {};
const rootRoute = createRootRoute();
const children = routes.map((path) =>
createRoute({
path,
getParentRoute: () => rootRoute,
component: Story,
}),
);
rootRoute.addChildren(children);
const router = createRouter({
history: createMemoryHistory({initialEntries, initialIndex}),
routeTree: rootRoute,
});
return <RouterProvider router={router} />;
}
declare module '@storybook/types' {
interface Parameters {
router?: {
initialEntries?: string[];
initialIndex?: number;
routes?: string[];
};
}
} You can add it as global decorator in |
Beta Was this translation helpful? Give feedback.
-
Hi there,
We're currently using React-Router and considering migrating to Tanstack Router...
We use Storybook a lot and we needed to use an add-on to enable React Router to work with Storybook.
Is this also the case with Tanstack Router? and if so does such an add-on exist yet?
Thanks!
Beta Was this translation helpful? Give feedback.
All reactions