{"id":20414879,"url":"https://github.com/asifvora/react-current-page-fallback","last_synced_at":"2025-04-12T17:05:27.054Z","repository":{"id":45832033,"uuid":"514144325","full_name":"asifvora/react-current-page-fallback","owner":"asifvora","description":"Keep the current page rendered as a fallback until the new page is loaded with React.lazy and React.Suspense. Route level code splitting in react without screen flickering (React Suspense + React Router Dom + React Topbar Progress Indicator)","archived":false,"fork":false,"pushed_at":"2023-03-21T06:06:37.000Z","size":491,"stargazers_count":13,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T09:06:01.170Z","etag":null,"topics":["components","react","react-component","react-current-page-fallback","react-fallback-current-page","react-fallback-page","react-lazy","react-router-dom-v5","react-router-dom-v6","react-suspense","reactjs"],"latest_commit_sha":null,"homepage":"react-current-page-fallback.vercel.app","language":"JavaScript","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/asifvora.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2022-07-15T05:23:18.000Z","updated_at":"2024-04-28T22:28:16.000Z","dependencies_parsed_at":"2025-04-12T17:01:51.074Z","dependency_job_id":null,"html_url":"https://github.com/asifvora/react-current-page-fallback","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifvora%2Freact-current-page-fallback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifvora%2Freact-current-page-fallback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifvora%2Freact-current-page-fallback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifvora%2Freact-current-page-fallback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asifvora","download_url":"https://codeload.github.com/asifvora/react-current-page-fallback/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248602275,"owners_count":21131613,"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":["components","react","react-component","react-current-page-fallback","react-fallback-current-page","react-fallback-page","react-lazy","react-router-dom-v5","react-router-dom-v6","react-suspense","reactjs"],"created_at":"2024-11-15T06:13:11.905Z","updated_at":"2025-04-12T17:05:27.026Z","avatar_url":"https://github.com/asifvora.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ereact-current-page-fallback\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eKeep the current page rendered as a fallback until the new page is loaded with React.lazy and React.Suspense. Route level code splitting in react without screen flickering (React Suspense + React Router Dom + React Topbar Progress Indicator)\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/asifvora/react-current-page-fallback/blob/master/LICENSE\" target=\"blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/%20license-MIT%20-green\" alt=\"react-current-page-fallback licence\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/asifvora/react-current-page-fallback/fork\" target=\"blank\"\u003e\n   \u003cimg src=\"https://img.shields.io/github/forks/asifvora/react-current-page-fallback?style=flat-square\" alt=\"react-current-page-fallback forks\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/asifvora/react-current-page-fallback/stargazers\" target=\"blank\"\u003e\n   \u003cimg src=\"https://img.shields.io/github/stars/asifvora/react-current-page-fallback?style=flat-square\" alt=\"react-current-page-fallback stars\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/asifvora/react-current-page-fallback/issues\" target=\"blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/asifvora/react-current-page-fallback?style=flat-square\" alt=\"react-current-page-fallback issues\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/asifvora/react-current-page-fallback/pulls\" target=\"blank\"\u003e\n   \u003cimg src=\"https://img.shields.io/github/issues-pr/asifvora/react-current-page-fallback?style=flat-square\" alt=\"react-current-page-fallback pull-requests\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)](https://reactjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![ReactRouter](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white)](https://reactrouter.com/)\n\n# 🛠️ Installation Steps\n\nUsing npm:\n```bash\nnpm i --save react-current-page-fallback\n```\n\nUsing yarn:\n```bash\nyarn add react-current-page-fallback\n```\n\n# 📖 Usage\n```javascript\nimport { FallbackProvider } from \"react-current-page-fallback\";\n\n// Wrapp root FallbackProvider for all routes\n\u003cFallbackProvider\u003e\n  your app routes here...\n\u003c/FallbackProvider\u003e\n\n// Wrapp every page using FallbackPageWrapper \nimport { FallbackPageWrapper } from \"react-current-page-fallback\";\n\n\u003cFallbackPageWrapper\u003e\n  your page-1 here...\n\u003c/FallbackPageWrapper\u003e\n\n\n\u003cFallbackPageWrapper\u003e\n  your page-2 here...\n\u003c/FallbackPageWrapper\u003e\n\n...\n```\n\n## 📂 Code Example\n\n**index.js**\n```javascript\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\n\nconst container = document.getElementById(\"root\");\nconst root = createRoot(container); // createRoot(container!) if you use TypeScript\n\nroot.render(\u003c\u003e\u003cApp/\u003e\u003c/\u003e);\n```\n\n**App.js**\n### react-router-dom V6\n```javascript\nimport React from \"react\";\nimport { BrowserRouter as Router, Routes, Route } from \"react-router-dom\";\nimport { FallbackProvider } from \"react-current-page-fallback\";\n\nconst Home = React.lazy(() =\u003e import(\"./pages/Home\"));\nconst About = React.lazy(() =\u003e import(\"./pages/About\"));\nconst Contact = React.lazy(() =\u003e import(\"./pages/Contact\"));\n\n// react-router-dom V6\nconst App = () =\u003e {\n  return (\n    \u003cRouter\u003e\n      \u003cdiv\u003e\n        \u003cFallbackProvider\u003e\n          \u003cRoutes\u003e\n            \u003cRoute path=\"/about\" element={ \u003cAbout /\u003e} /\u003e\n            \u003cRoute path=\"/contact\" element={ \u003cContact /\u003e} /\u003e\n            \u003cRoute path=\"/\" element={ \u003cHome /\u003e} /\u003e\n          \u003c/Routes\u003e\n        \u003c/FallbackProvider\u003e\n      \u003c/div\u003e\n    \u003c/Router\u003e\n  );\n};\nexport default App;\n```\n\n**App.js**\n\n### react-router-dom V5\n\n```javascript\nimport React from \"react\";\nimport { BrowserRouter as Router, Switch, Route } from \"react-router-dom\";\nimport { FallbackProvider } from \"react-current-page-fallback\";\n\n// react-router-dom V5\nconst App = () =\u003e {\n  return (\n    \u003cRouter\u003e\n      \u003cdiv\u003e\n        \u003cFallbackProvider\u003e\n          \u003cSwitch\u003e\n            \u003cRoute path=\"/about\"\u003e\n              \u003cAbout /\u003e\n            \u003c/Route\u003e\n            \u003cRoute path=\"/contact\"\u003e\n              \u003cContact /\u003e\n            \u003c/Route\u003e\n            \u003cRoute path=\"/\"\u003e\n              \u003cHome /\u003e\n            \u003c/Route\u003e\n          \u003c/Switch\u003e\n        \u003c/FallbackProvider\u003e\n      \u003c/div\u003e\n    \u003c/Router\u003e\n  );\n};\nexport default App;\n```\n\n**Nav.js**\n\n```javascript\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nexport const Nav = () =\u003e {\n  return (\n    \u003c\u003e\n        \u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\n        \u003cLink to=\"/about\"\u003eAbout\u003c/Link\u003e \n        \u003cLink to=\"/contact\"\u003eContact\u003c/Link\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default Nav;\n```\n\n**Home.js**\n\n```javascript\nimport React from 'react';\nimport { Nav } from '../components/Nav';\nimport { FallbackPageWrapper } from \"react-current-page-fallback\";\n\nconst Home  = () =\u003e {\n  return (\n    \u003cFallbackPageWrapper\u003e\n      \u003cdiv\u003e\n        \u003cNav /\u003e\n        \u003ch1\u003eHome\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/FallbackPageWrapper\u003e\n  );\n};\n\nexport default Home;\n```\n\n**About.js**\n\n```javascript\nimport React from 'react';\nimport { Nav } from '../components/Nav';\nimport { FallbackPageWrapper } from \"react-current-page-fallback\";\n\nconst About  = () =\u003e {\n  return (\n    \u003cFallbackPageWrapper\u003e\n      \u003cdiv\u003e\n        \u003cNav /\u003e\n        \u003ch1\u003eAbout\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/FallbackPageWrapper\u003e\n  );\n};\n\nexport default About;\n```\n\n**Contact.js**\n\n```javascript\nimport React from 'react';\nimport { Nav } from '../components/Nav';\nimport { FallbackPageWrapper } from \"react-current-page-fallback\";\n\nconst Contact  = () =\u003e {\n  return (\n    \u003cFallbackPageWrapper\u003e\n      \u003cdiv\u003e\n        \u003cNav /\u003e\n        \u003ch1\u003eContact\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/FallbackPageWrapper\u003e\n  );\n};\n\nexport default Contact;\n```\n\n# Preview\n## Test this using Slow 3G for better results\n![](./react-current-page-fallback.gif)\n\n# Example\nYou can run the example by cloning the repo:\n\n```sh\ngit clone https://github.com/asifvora/react-current-page-fallback.git\nyarn\nyarn start\n```\n\n# 🛡️ License\n\nThis project is licensed under the MIT License - see the [`LICENSE`](LICENSE) file for details.\n\n# 👨‍💻 Author\n### 👤 Asif Vora\n- Github: [@asifvora](https://github.com/asifvora)\n- LinkedIn: [@asif-vora](https://www.linkedin.com/in/asif-vora/)\n- Twitter: [@007_dark_shadow](https://twitter.com/007_dark_shadow)\n- Instagram: [@007_dark_shadow](https://www.instagram.com/007_dark_shadow/)\n\n# 🍰 Contributing\n\n- Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/asifvora/react-current-page-fallback/compare).\n\n- Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details.\n\n# 🙏 Support\nThis project needs a ⭐️  from you. Don't forget to leave a star ⭐️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasifvora%2Freact-current-page-fallback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasifvora%2Freact-current-page-fallback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasifvora%2Freact-current-page-fallback/lists"}