{"id":21660118,"url":"https://github.com/JesusTheHun/storybook-addon-remix-react-router","last_synced_at":"2025-07-17T23:30:50.843Z","repository":{"id":37943816,"uuid":"489282860","full_name":"JesusTheHun/storybook-addon-remix-react-router","owner":"JesusTheHun","description":"Use your app router in your stories. A decorator made for Remix React Router and Storybook","archived":false,"fork":false,"pushed_at":"2024-09-23T12:47:35.000Z","size":1532,"stargazers_count":50,"open_issues_count":8,"forks_count":12,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-13T02:03:13.958Z","etag":null,"topics":["addon","decorator","react","remix","router","storybook"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JesusTheHun.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-06T08:49:59.000Z","updated_at":"2024-10-15T08:23:46.000Z","dependencies_parsed_at":"2023-12-03T22:24:26.964Z","dependency_job_id":"1f4a6b93-dbd1-4cd6-8f55-9df1af22f84a","html_url":"https://github.com/JesusTheHun/storybook-addon-remix-react-router","commit_stats":{"total_commits":207,"total_committers":3,"mean_commits":69.0,"dds":"0.019323671497584516","last_synced_commit":"e8b13193d2fe560ed76d64c274db8791a70cf7de"},"previous_names":["jesusthehun/storybook-addon-remix-react-router","jesusthehun/storybook-addon-react-router-v6"],"tags_count":45,"template":false,"template_full_name":"storybookjs/addon-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JesusTheHun%2Fstorybook-addon-remix-react-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JesusTheHun%2Fstorybook-addon-remix-react-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JesusTheHun%2Fstorybook-addon-remix-react-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JesusTheHun%2Fstorybook-addon-remix-react-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JesusTheHun","download_url":"https://codeload.github.com/JesusTheHun/storybook-addon-remix-react-router/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225901208,"owners_count":17542183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","decorator","react","remix","router","storybook"],"created_at":"2024-11-25T09:32:14.790Z","updated_at":"2025-07-17T23:30:50.830Z","avatar_url":"https://github.com/JesusTheHun.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Storybook Addon Remix React Router\n\n[![Storybook](https://raw.githubusercontent.com/storybookjs/brand/master/badge/badge-storybook.svg?sanitize=true)](https://storybook.js.org)\n[![npm](https://img.shields.io/npm/v/storybook-addon-remix-react-router?color=blue)](https://www.npmjs.com/package/storybook-addon-remix-react-router)\n[![Release](https://github.com/JesusTheHun/storybook-addon-remix-react-router/actions/workflows/release.yml/badge.svg)](https://github.com/JesusTheHun/storybook-addon-remix-react-router/actions/workflows/release.yml)\n![npm](https://img.shields.io/npm/dm/storybook-addon-remix-react-router)\n\n\u003e Use Remix React Router in your stories.\n\nStarting with `react-router@7`, the package `react-router-dom` is deprecated by Remix.  \nIf you still use this package, use the `v3` of this addon.  \nIf you have dropped it in favor of `react-router`, use the `v4` or `v5` depending on your Storybook version.  \nCheck the compatibility table at the bottom.\n\n## Recent changes\n\n✅ Support for Storybook 9 with `storybook-addon-remix-react-router@5`.  \n✅ Support for React Router v7 with `storybook-addon-remix-react-router@4`.  \n✅ Support for Storybook 8 with `storybook-addon-remix-react-router@3`.\n\n## Getting Started\n\nInstall the package\n\n```\nnpm i -D storybook-addon-remix-react-router\n```\n\nAdd it to your storybook configuration:\n\n```js\n// .storybook/main.ts\n\nexport default {\n  addons: ['storybook-addon-remix-react-router'],\n} satisfies StorybookConfig;\n```\n\n## Decorate all stories of a component\n\nTo add the router to all the stories of a component, simply add it to the `decorators` array.\n\nNote that `parameters.reactRouter` is optional, by default the router will render the component at `/`.\n\n```tsx\nimport { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router';\n\nexport default {\n  title: 'User Profile',\n  render: () =\u003e \u003cUserProfile /\u003e,\n  decorators: [withRouter],\n  parameters: {\n    reactRouter: reactRouterParameters({\n      location: {\n        pathParams: { userId: '42' },\n      },\n      routing: { path: '/users/:userId' },\n    }),\n  },\n};\n```\n\n## Decorate a specific story\n\nTo change the config for a single story, you can do the following :\n\n```tsx\nimport { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router';\n\nexport default {\n  title: 'User Profile',\n  render: () =\u003e \u003cUserProfile /\u003e,\n  decorators: [withRouter],\n};\n\nexport const FromHomePage = {\n  parameters: {\n    reactRouter: reactRouterParameters({\n      location: {\n        pathParams: { userId: '42' },\n        searchParams: { tab: 'activityLog' },\n        state: { fromPage: 'homePage' },\n      },\n      routing: {\n        path: '/users/:userId',\n        handle: 'Profile',\n      },\n    }),\n  },\n};\n```\n\n## Decorate all stories, globally\n\nTo wrap all your project's stories inside a router by adding the decorator in your `preview.js` file.\n\n```ts\n// .storybook/preview.js\n\nexport default {\n  decorators: [withRouter],\n  parameters: {\n    reactRouter: reactRouterParameters({ ... }),\n  }\n} satisfies Preview;\n```\n\n## Location\n\nTo specify anything related to the browser location, use the `location` property.\n\n```tsx\ntype LocationParameters = {\n  path?: string | ((inferredPath: string, pathParams: Record\u003cstring, string\u003e) =\u003e string | undefined);\n  pathParams?: PathParams;\n  searchParams?: ConstructorParameters\u003ctypeof URLSearchParams\u003e[0];\n  hash?: string;\n  state?: unknown;\n};\n```\n\n### Inferred path\n\nIf `location.path` is not provided, the browser pathname will be generated using the joined `path`s from the `routing` property and the `pathParams`.\n\n### Path as a function\n\nYou can provide a function to `path`.  \nIt will receive the joined `path`s from the routing property and the `pathParams` as parameters.  \nIf 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.  \nIf the function returns `undefined`, it will fallback to the default behavior, just like if you didn't provide any value for `location.path`.\n\n## Routing\n\nYou can set `routing` to anything accepted by `createBrowserRouter`.  \nTo make your life easier, `storybook-addon-remix-react-router` comes with some routing helpers :\n\n```tsx\nexport const MyStory = {\n  parameters: {\n    reactRouter: reactRouterParameters({\n      routing: reactRouterOutlet(\u003cMyOutlet /\u003e),\n    }),\n  },\n};\n```\n\n### Routing Helpers\n\nThe following helpers are available out of the box :\n\n```ts\nreactRouterOutlet(); // Render a single outlet\nreactRouterOutlets(); // Render multiple outlets\nreactRouterNestedOutlets(); // Render multiple outlets nested one into another\nreactRouterNestedAncestors(); // Render the story as an outlet of nested outlets\n```\n\nYou can also create your own helper and use the exported type `RoutingHelper` to assist you :\n\n```ts\nimport { RoutingHelper } from 'storybook-addon-remix-react-router';\n\nconst myCustomHelper: RoutingHelper = () =\u003e {\n  // Routing creation logic\n};\n```\n\n`RouterRoute` is basically the native `RouteObject` from `react-router`; augmented with `{ useStoryElement?: boolean }`.\nIf you want to accept a JSX and turn it into a `RouterRoute`, you can use the exported function `castRouterRoute`.\n\n### Use the story as the route element\n\nJust set `{ useStoryElement: true }` in the routing config object.\n\n## Dedicated panel\n\nNavigation events, loader and actions are logged, for you to better understand the lifecycle of your components.\n\n![Addon Panel](https://user-images.githubusercontent.com/94478/224843029-b37ff60d-10f8-4198-bbc3-f26e2775437f.png)\n\n## Compatibility\n\nThis package aims to support `Storybook \u003e 7` and `React \u003e 16`.  \nHere is a compatibility table :\n\n| Addon | React                 | Storybook | React Router     |\n|-------|-----------------------|-----------|------------------|\n| 5.x   | \u0026gt;= 16.8.0          | 9.x       | 7.x              |\n| 4.x   | \u0026gt;= 16.8.0          | 8.x       | 7.x              |\n| 3.x   | \u0026gt;= 16.8.0          | 8.x       | 6.x \u003csup\u003e1\u003c/sup\u003e |\n| 2.x   | \u0026gt;= 16.8.0 \u003c 19.0.0 | 7.x       | 6.x              |\n| 1.x   | \u0026gt;= 16.8.0 \u003c 19.0.0 | 7.x       | 6.x              |\n\n\u003csup\u003e1\u003c/sup\u003e You can actually use react-router v7 if you import from `react-router-dom` and not `react-router`.\n\nIf you have an issue with any version, open an issue.\n\n## Contribution\n\nContributions are welcome.\n\nBefore writing any code, file an issue to showcase the bug or the use case for the feature you want to see in this addon.\n\n## License\n\nThis package is released under the Apache 2.0 license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJesusTheHun%2Fstorybook-addon-remix-react-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJesusTheHun%2Fstorybook-addon-remix-react-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJesusTheHun%2Fstorybook-addon-remix-react-router/lists"}