React-suspenser NPM

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;