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;
```
**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 ⭐️
