{"library":"storybook-addon-remix-react-router","title":"Storybook Addon for Remix React Router","type":"library","description":"This Storybook addon integrates Remix React Router into your stories, enabling comprehensive testing and demonstration of components that rely on React Router's navigation and state management. The current stable version is 6.1.0, released recently in March 2026, indicating an active development and maintenance cadence with frequent updates to support new Storybook and React Router versions. A key differentiator is its explicit support for `react-router@7` and newer, making a clear distinction from earlier versions (v3 and below) that supported `react-router-dom`. It provides a `withRouter` decorator and `reactRouterParameters` to configure routes, locations, path parameters, search parameters, and state directly within your stories, allowing for precise control over the routing context for each component variant. This addon ensures that components designed for a Remix React Router environment can be faithfully rendered and interacted with in isolation within Storybook.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install storybook-addon-remix-react-router"],"cli":null},"imports":["import { withRouter } from 'storybook-addon-remix-react-router';","import { reactRouterParameters } from 'storybook-addon-remix-react-router';","import type { StorybookConfig } from '@storybook/types';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/JesusTheHun/storybook-addon-remix-react-router","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-addon-remix-react-router","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { Outlet, Link } from 'react-router-dom'; // Example component using router hooks\n\nconst UserProfile = () => (\n  <div>\n    <h1>User Profile Page</h1>\n    <p>Viewing profile for user ID: <Outlet /></p>\n    <nav>\n      <Link to=\"/users/42\">Profile</Link> | <Link to=\"/users/42?tab=activityLog\">Activity Log</Link>\n    </nav>\n  </div>\n);\n\nconst meta: Meta<typeof UserProfile> = {\n  title: 'User Profile',\n  component: UserProfile,\n  decorators: [withRouter],\n  parameters: {\n    reactRouter: reactRouterParameters({\n      location: {\n        pathParams: { userId: '42' },\n        searchParams: { tab: 'profile' },\n        state: { fromPage: 'homePage' }\n      },\n      routing: { path: '/users/:userId' },\n    }),\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof UserProfile>;\n\nexport const Default: Story = {};\n\nexport const ActivityLogTab: Story = {\n  parameters: {\n    reactRouter: reactRouterParameters({\n      location: {\n        pathParams: { userId: '42' },\n        searchParams: { tab: 'activityLog' }\n      },\n      routing: { path: '/users/:userId' }\n    })\n  }\n};","lang":"typescript","description":"Demonstrates how to configure and use the `withRouter` decorator and `reactRouterParameters` to set up routing context for a `UserProfile` component in Storybook, including path parameters and search parameters for different story states.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}