{"id":15131619,"url":"https://github.com/react-widgets/react_widgets-router","last_synced_at":"2026-02-27T06:04:03.018Z","repository":{"id":256404310,"uuid":"855152827","full_name":"react-widgets/react_widgets-router","owner":"react-widgets","description":"This package is a router that provides transition animations and fully preserves the state of previous elements, offering an experience close to a Web standard API.","archived":false,"fork":false,"pushed_at":"2025-01-11T18:52:58.000Z","size":381,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T18:55:20.501Z","etag":null,"topics":["keep-alive","lightweight","react-package","react-router","transition-animation"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@web-package/react-widgets-router","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-widgets.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":"2024-09-10T12:00:58.000Z","updated_at":"2025-01-11T18:53:01.000Z","dependencies_parsed_at":"2024-10-09T17:50:46.965Z","dependency_job_id":null,"html_url":"https://github.com/react-widgets/react_widgets-router","commit_stats":null,"previous_names":["react-widgets/react_widgets-router"],"tags_count":0,"template":false,"template_full_name":"MTtankkeo/typescript-playwright-rollup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widgets%2Freact_widgets-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widgets%2Freact_widgets-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widgets%2Freact_widgets-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widgets%2Freact_widgets-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-widgets","download_url":"https://codeload.github.com/react-widgets/react_widgets-router/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237807328,"owners_count":19369595,"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":["keep-alive","lightweight","react-package","react-router","transition-animation"],"created_at":"2024-09-26T04:00:34.144Z","updated_at":"2025-10-23T09:30:52.244Z","avatar_url":"https://github.com/react-widgets.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"200px\" src=\"https://github.com/user-attachments/assets/7c426bcd-9a8c-447a-a82c-972447d90882\"\u003e\n  \u003ch1\u003eReact Widgets Router\u003c/h1\u003e\n  \u003ctable\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth\u003eVersion\u003c/th\u003e\n            \u003cth\u003ev1.0.0-beta6\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n    You need to learn more about the \u003ca href=\"https://github.com/react-widgets/react_widgets\"\u003ereact-widgets\u003c/a\u003e package!\n\u003c/div\u003e\n\n# Introduction\nThis package is a router that provides transition animations and fully preserves the state of previous elements, offering an experience close to a Web standard API.\n\n\u003e __See Also__\u003cbr\u003e\n\u003e The `keep-alive` feature is enabled by default and documented, but the options for keep-alive have not yet been made configurable or customizable.\n\u003e See Also, If you want the change-log by version for this package. refer to [Change Log](CHANGELOG.md) for details.\n\n# Preview\nThe image below is a simple use gif of [Quark Icons](https://quarkicons.com/) and a website created using @web-package/react-widgets-router and @web-package/react-widgets.\n\n![preview](https://github.com/user-attachments/assets/9d548362-05da-4b50-8288-ed410e2ffd33)\n\n## Usage\nThis below codes are a simple example of the basic usage of this package.\n\n\u003e See Also, Instead of setting the `default` attribute to true, you can also set the path attribute to `*`.\n\n```ts\nreturn (\n    \u003cRouter keepAlive={false}\u003e\n        \u003cRoute path=\"/example-1\" component={ExamplePage1} keepAlive={true} /\u003e\n        \u003cRoute path=\"/example-2\" component={ExamplePage2} keepAlive={true} /\u003e\n        \u003cRoute path=\"/example-3\" element={\u003cExamplePage3 /\u003e} default={true} /\u003e\n        \u003cRoute path=\"/example-4\" element={\u003c\u003eHello, World!\u003c/\u003e} /\u003e\n    \u003c/Router\u003e\n)\n```\n\n### Without hooks and globally\n```tsx\nfunction ExamplePage1() {\n    return (\n        \u003cbutton onClick={() =\u003e RouterBinding.instance.push(\"/exmaple-2\")}\u003e\n            Go to /example-2\n        \u003c/button\u003e\n    )\n}\n```\n\n### With hooks and locally\nYou need to keep that in mind about this feature is an experimental stage.\n\n```tsx\nfunction ExamplePage2() {\n    const route = useRoute();\n\n    return (\n        \u003cbutton onClick={() =\u003e route(\"/exmaple-1\")}\u003e\n            Go to /example-1\n        \u003c/button\u003e\n    )\n}\n```\n\n## The Properties of CSS\n| Name | Description | Default |\n| ---- | ----------- | ---- |\n| --router-fadein-keyframe | This variable is animation name of a fade-in transition keyframe for this router. | None\n| --router-fadein-duration | This variable is animation duration of a fade-in transition for this router. | 0.3s\n| --router-fadeout-keyframe | This variable is animation name of a fade-out transition keyframe for this router. | None\n| --router-fadeout-duration | This variable is animation duration of a fade-out transition for this router. | 0.3s\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widgets%2Freact_widgets-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-widgets%2Freact_widgets-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widgets%2Freact_widgets-router/lists"}