Usage with Storybook?

[MerlinMason]

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!

[erickarnis-tb]

Currently with Storybook I get this error on most stories: ReferenceError: Cannot access 'Root' before initialization
I'm on @tanstack/react-router: "1.4.6",
Haven't been able to figure it out

[erickarnis-tb]

I figured it out. Importing anything from a router file leads to the execution of the router file which can lead to errors even in unrelated stories.

[dohomi]

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

[Dixtir]

@dohomi have you found a solution for this?

[dohomi]

I use this:

const rootRoute = new RootRoute()
const indexRoute = new Route({ getParentRoute: () => rootRoute, path: "/" })
const memoryHistory = createMemoryHistory({ initialEntries: ["/"] })
const routeTree = rootRoute.addChildren([indexRoute])
const router = new Router({ routeTree, history: memoryHistory })

// @ts-ignore todo maybe soon a better solution for this?
export const withSbTanstackRouter: Preview["decorators"][0] = (Story, context) => {
  return <RouterProvider router={router} defaultComponent={() => <Story {...context} />} />
}

then wrap your most outer global decorator story like this:

export const SbDecorator: Decorator = (Story,args) => (
  <>{withSbTanstackRouter(Story,args))}</>
)

[Dixtir]

@dohomi thanks, much appreciated!

[alireza-mh]

I'm interested to know if there are any workaround/solutions to render the Link component inside a story. Some components might want to use router hooks even.

[Dixtir]

@alireza-mh have you found a solution for this?

[jaens]

Here's what I created: Storybook fake Tanstack router - Gist

[boonya]

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 preview.tsx file.

[thienandangthanh]

@boonya Thank you for your snippet!
It works for my projects using @tanstack/react-router and Storybook.

I think your discussion should be marked as answer for this question.
And if possible, it should be also added to @tanstack/react-router docs.

[boonya]

Moreover, if you use @storybook/addon-actions you can integrate it as well.

import {action} from '@storybook/addon-actions';

...
const children = routes.map((path) => createRoute({
  path,
  getParentRoute: () => rootRoute,
  component: Story,
  onLeave: action('router onLeave'),
  onEnter: action('router onEnter'),
  onStay: action('router onStay'),
})
...

[wurmr]

This worked great for me until router version 1.30. At that version and above it starts throwing a typescript error assigning router={router}.

[boonya]

@wurmr , I have 1.32.3 and it still works fine