react-suspenser

Easier management of the lazy loading process

Usage no npm install needed!

<script type="module">
  import reactSuspenser from 'https://cdn.skypack.dev/react-suspenser';
</script>

README

react-suspenser

NPM version NPM downloads NPM license Codecov Travis Bundle size

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