https://github.com/jb1905/react-suspenser

🦥 Easier management of the lazy loading process
https://github.com/jb1905/react-suspenser

dynamic import lazy loading modules react suspense

Last synced: 2 months ago
JSON representation

🦥 Easier management of the lazy loading process

• Host: GitHub
• URL: https://github.com/jb1905/react-suspenser
• Owner: JB1905
• License: mit
• Created: 2020-09-23T19:22:30.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-02-03T13:27:49.000Z (over 2 years ago)
• Last Synced: 2025-03-16T14:55:27.633Z (7 months ago)
• Topics: dynamic, import, lazy, loading, modules, react, suspense
• Language: TypeScript
• Homepage:
• Size: 1.47 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# [react-suspenser](https://github.com/JB1905/react-suspenser)

[![NPM version](https://img.shields.io/npm/v/react-suspenser?style=flat-square)](https://www.npmjs.com/package/react-suspenser)

[![NPM downloads](https://img.shields.io/npm/dm/react-suspenser?style=flat-square)](https://www.npmjs.com/package/react-suspenser)

[![NPM license](https://img.shields.io/npm/l/react-suspenser?style=flat-square)](https://www.npmjs.com/package/react-suspenser)

[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-suspenser?style=flat-square)](https://codecov.io/gh/JB1905/react-suspenser)

[![Travis](https://img.shields.io/travis/com/JB1905/react-suspenser/main?style=flat-square)](https://app.travis-ci.com/github/JB1905/react-suspenser)

[![Bundle size](https://img.shields.io/bundlephobia/min/react-suspenser?style=flat-square)](https://bundlephobia.com/result?p=react-suspenser)

## About

Easier management of the lazy loading process

## Demo

- [Basic](https://codesandbox.io/s/basic-demo-smd9i)

- [With Context](https://codesandbox.io/s/context-demo-9nvo0)

## How to Install

First, install the library in your project by npm:

```sh

$ npm install react-suspenser

```

Or Yarn:

```sh

$ yarn add react-suspenser

```

## Getting Started

### Without Context configuration

**• Use withSuspense:**

```js

// App.js

import React from 'react';

import { withSuspense } from 'react-suspenser';

const LazyComponent = withSuspense(
Loading...
)(

  lazy(() => import('./components/LazyComponent'))

);


const App = () => {

  return ;

};

export default App;

```

---

### With Context configuration

**• Set SuspenseProvider (if you want to use the same fallback for all lazy components wrapped in withSuspense HOC):**

```js

// index.js

import React from 'react';

import ReactDOM from 'react-dom';

import { SuspenseProvider } from 'react-suspenser';

import App from './App';

ReactDOM.render(

  Loading...}>

    

  ,

  document.getElementById('root')

);

```

**• Then use withSuspense:**

```js

// App.js

import React from 'react';

import { withSuspense } from 'react-suspenser';

const LazyComponent = withSuspense()(

  lazy(() => import('./components/LazyComponent'))

);

const App = () => {

  return ;

};

export default App;

```

## License

This project is licensed under the MIT License © 2020-present Jakub Biesiada