react-suspenser
About
Easier management of the lazy loading process
Demo
How to Install
First, install the library in your project by npm:
$ npm install react-suspenser
Or Yarn:
$ yarn add react-suspenser
Getting Started
Without Context configuration
• Use withSuspense:
// App.js
import React from 'react';
import { withSuspense } from 'react-suspenser';
const LazyComponent = withSuspense(<p>Loading...</p>)(
lazy(() => import('./components/LazyComponent'))
);
const App = () => {
return <LazyComponent />;
};
export default App;
With Context configuration
• Set SuspenseProvider (if you want to use the same fallback for all lazy components wrapped in withSuspense HOC):
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { SuspenseProvider } from 'react-suspenser';
import App from './App';
ReactDOM.render(
<SuspenseProvider fallback={<p>Loading...</p>}>
<App />
</SuspenseProvider>,
document.getElementById('root')
);
• Then use withSuspense:
// App.js
import React from 'react';
import { withSuspense } from 'react-suspenser';
const LazyComponent = withSuspense()(
lazy(() => import('./components/LazyComponent'))
);
const App = () => {
return <LazyComponent />;
};
export default App;
License
This project is licensed under the MIT License © 2020-present Jakub Biesiada