{"id":13560278,"url":"https://github.com/Sunny-117/rka","last_synced_at":"2025-04-03T15:31:54.068Z","repository":{"id":229284592,"uuid":"776324929","full_name":"Sunny-117/rka","owner":"Sunny-117","description":"A component that maintains component state and avoids repeated re-rendering.","archived":false,"fork":false,"pushed_at":"2024-03-23T10:35:50.000Z","size":240,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-20T06:14:17.778Z","etag":null,"topics":["cache","react-keepalive","reactjs"],"latest_commit_sha":null,"homepage":"","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/Sunny-117.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2024-03-23T07:28:20.000Z","updated_at":"2024-03-24T05:15:36.000Z","dependencies_parsed_at":"2024-04-01T23:07:11.152Z","dependency_job_id":"a865d8b5-8053-4168-afb8-cad35ae9216d","html_url":"https://github.com/Sunny-117/rka","commit_stats":null,"previous_names":["sunny-117/rka"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sunny-117%2Frka","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sunny-117%2Frka/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sunny-117%2Frka/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sunny-117%2Frka/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sunny-117","download_url":"https://codeload.github.com/Sunny-117/rka/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247028033,"owners_count":20871639,"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":["cache","react-keepalive","reactjs"],"created_at":"2024-08-01T13:00:40.831Z","updated_at":"2025-04-03T15:31:49.027Z","avatar_url":"https://github.com/Sunny-117.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# rkajs [![npm](https://img.shields.io/npm/v/@sunny-117/cherry.svg)](https://npmjs.com/package/rkajs)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sunny-117/rka\"\u003e\n    \u003cimg width=\"100%\" src=\"./assets/logo.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## ✨ Features\n- Lightweight\n- You will be able to use the latest React Hooks.\n- Not based on React Router, so you can use it wherever you need to cache it.\n- You can easily use `\u003cKeepAlive\u003e` to wrap your components to keep them alive.\n- Because it is not controlled by `display: none | block`, you can use animation.\n- Ability to manually control whether your components need to stay active.\n\n## 📦 Installation\n\nTo use rka with your React app:\n\n```bash\nnpm install rkajs\nyarn add rkajs\npnpm i rkajs\nbun i rkajs\n```\n\n## Usage\n\n![views](./assets/views.gif)\n\n```tsx\nimport { KeepAlive, KeepAliveTransfer } from \"rkajs\";\nimport { BrowserRouter, Link, Routes, Route } from \"react-router-dom\";\nimport Home from \"./pages/Home\";\nimport Form from \"./pages/Form\";\n\nconst AliveHomeView = KeepAliveTransfer(Home, \"home\");\nconst AliveFormView = KeepAliveTransfer(Form, \"form\");\n\nexport default function App() {\n  return (\n    \u003cBrowserRouter\u003e\n      \u003cKeepAlive\u003e\n        \u003cdiv\u003e\n          \u003cul\u003e\n            \u003cli\u003e\n              \u003cLink to={\"/\"}\u003eHome\u003c/Link\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n              \u003cLink to={\"/form\"}\u003eForm\u003c/Link\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n          \u003cdiv\u003e\n            \u003cRoutes\u003e\n              \u003cRoute path=\"/\" element={\u003cAliveHomeView\u003e\u003c/AliveHomeView\u003e}\u003e\u003c/Route\u003e\n              \u003cRoute\n                path=\"/form\"\n                element={\u003cAliveFormView\u003e\u003c/AliveFormView\u003e}\n              \u003e\u003c/Route\u003e\n            \u003c/Routes\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/KeepAlive\u003e\n    \u003c/BrowserRouter\u003e\n  );\n}\n```\n\n## 💡 Why do you need this component?\n\nIf you've used [Vue](https://vuejs.org/), you know that it has a very good component ([keep-alive](https://vuejs.org/v2/guide/components-dynamic-async.html)) that keeps the state of the component to avoid repeated re-rendering.\n\nSometimes, we want the list page to cache the page state after the list page enters the detail page. When the detail page returns to the list page, the list page is still the same as before the switch.\n\nOh, this is actually quite difficult to achieve, because the components in React cannot be reused once they are uninstalled. Two solutions are proposed in [issue #12039](https://github.com/facebook/react/issues/12039). By using the style switch component display (`display: none | block;`), this can cause problems, such as when you switch components, you can't use animations; or use data flow management tools like Mobx and Redux, but this is too much trouble.\n\nIn the end, I implemented this effect through the [React.createPortal API](https://reactjs.org/docs/portals.html). `react-keep-alive` has two main components `\u003cProvider\u003e` and `\u003cKeepAlive\u003e`. The `\u003cProvider\u003e` is responsible for saving the component's cache and rendering the cached component outside of the application via the React.createPortal API before processing. The cached components must be placed in `\u003cKeepAlive\u003e`, and `\u003cKeepAlive\u003e` will mount the components that are cached outside the application to the location that really needs to be displayed.\n\n\n\n## 🐛 Issues\n\nIf you find a bug, please file an issue on [our issue tracker on GitHub](https://github.com/Sunny-117/rka/issues).\n\n\n## 📄 License\n\nrks is available under the [MIT](./LICENSE) License.\n\n\n## Inspired\n\nInspired by [react-keep-alive](https://github.com/StructureBuilder/react-keep-alive/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSunny-117%2Frka","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSunny-117%2Frka","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSunny-117%2Frka/lists"}