Back to Storybook

Tanstack React Query And Path

docs/_snippets/tanstack-react-query-and-path.md

10.4.01.4 KB
Original Source
ts
import type { Meta, StoryObj } from '@storybook/tanstack-react';

import { Route } from './Page';

const meta = {
  parameters: {
    tanstack: {
      router: {
        route: Route,
      },
    },
  },
} satisfies Meta<typeof Route>;

export default meta;
type Story = StoryObj<typeof meta>;

export const WithHash: Story = {
  parameters: {
    tanstack: {
      // ๐Ÿ‘‡ Provide the URL fragment (hash) for the route
      router: { path: '/#section-name' },
    },
  },
};

export const WithSearch: Story = {
  parameters: {
    tanstack: {
      // ๐Ÿ‘‡ Provide the query string for the route
      router: { query: { tab: 'details', page: '2' } },
    },
  },
};
ts
import preview from '../.storybook/preview';

import { Route } from './Page';

const meta = preview.meta({
  parameters: {
    tanstack: {
      router: {
        route: Route,
      },
    },
  },
});

export const WithHash = meta.story({
  parameters: {
    tanstack: {
      // ๐Ÿ‘‡ Provide the URL fragment (hash) for the route
      router: { path: '/#section-name' },
    },
  },
});

export const WithSearch = meta.story({
  parameters: {
    tanstack: {
      // ๐Ÿ‘‡ Provide the query string for the route
      router: { query: { tab: 'details', page: '2' } },
    },
  },
});