https://github.com/asifvora/react-current-page-fallback
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)
https://github.com/asifvora/react-current-page-fallback
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
Last synced: 8 months ago
JSON representation
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)
- Host: GitHub
- URL: https://github.com/asifvora/react-current-page-fallback
- Owner: asifvora
- License: mit
- Created: 2022-07-15T05:23:18.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-21T06:06:37.000Z (almost 3 years ago)
- Last Synced: 2025-03-20T09:06:01.170Z (9 months ago)
- 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
- Language: JavaScript
- Homepage: react-current-page-fallback.vercel.app
- Size: 479 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
react-current-page-fallback
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)
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
[](https://reactrouter.com/)
# 🛠️ Installation Steps
Using npm:
```bash
npm i --save react-current-page-fallback
```
Using yarn:
```bash
yarn add react-current-page-fallback
```
# 📖 Usage
```javascript
import { FallbackProvider } from "react-current-page-fallback";
// Wrapp root FallbackProvider for all routes
your app routes here...
// Wrapp every page using FallbackPageWrapper
import { FallbackPageWrapper } from "react-current-page-fallback";
your page-1 here...
your page-2 here...
...
```
## 📂 Code Example
**index.js**
```javascript
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const container = document.getElementById("root");
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<>>);
```
**App.js**
### react-router-dom V6
```javascript
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { FallbackProvider } from "react-current-page-fallback";
const Home = React.lazy(() => import("./pages/Home"));
const About = React.lazy(() => import("./pages/About"));
const Contact = React.lazy(() => import("./pages/Contact"));
// react-router-dom V6
const App = () => {
return (
} />
} />
} />
);
};
export default App;
```
**App.js**
### react-router-dom V5
```javascript
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { FallbackProvider } from "react-current-page-fallback";
// react-router-dom V5
const App = () => {
return (
);
};
export default App;
```
**Nav.js**
```javascript
import React from 'react';
import { Link } from 'react-router-dom';
export const Nav = () => {
return (
<>
Home
About
Contact
>
);
};
export default Nav;
```
**Home.js**
```javascript
import React from 'react';
import { Nav } from '../components/Nav';
import { FallbackPageWrapper } from "react-current-page-fallback";
const Home = () => {
return (
Home
);
};
export default Home;
```
**About.js**
```javascript
import React from 'react';
import { Nav } from '../components/Nav';
import { FallbackPageWrapper } from "react-current-page-fallback";
const About = () => {
return (
About
);
};
export default About;
```
**Contact.js**
```javascript
import React from 'react';
import { Nav } from '../components/Nav';
import { FallbackPageWrapper } from "react-current-page-fallback";
const Contact = () => {
return (
Contact
);
};
export default Contact;
```
# Preview
## Test this using Slow 3G for better results
# Example
You can run the example by cloning the repo:
```sh
git clone https://github.com/asifvora/react-current-page-fallback.git
yarn
yarn start
```
# 🛡️ License
This project is licensed under the MIT License - see the [`LICENSE`](LICENSE) file for details.
# 👨💻 Author
### 👤 Asif Vora
- Github: [@asifvora](https://github.com/asifvora)
- LinkedIn: [@asif-vora](https://www.linkedin.com/in/asif-vora/)
- Twitter: [@007_dark_shadow](https://twitter.com/007_dark_shadow)
- Instagram: [@007_dark_shadow](https://www.instagram.com/007_dark_shadow/)
# 🍰 Contributing
- 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).
- Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details.
# 🙏 Support
This project needs a ⭐️ from you. Don't forget to leave a star ⭐️