0.0.4 • Published 4 years ago

react-with-dynamic v0.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

react-with-dynamic (WIP)

NPM version NPM downloads NPM license Codecov Travis Bundle size

About

Improved lazy loading in React with suspense and error boundary

Demo

How to Install

First, install the library in your project by npm:

$ npm install react-with-dynamic

Or Yarn:

$ yarn add react-with-dynamic

Getting Started

Without Context configuration

• Use withDynamic:

// App.js

import React from 'react';
import { withDynamic } from 'react-with-dynamic';

const LazyComponent = withDynamic({
  suspenseFallback: <p>Loading...</p>,
  errorBoundaryProps: {
    fallback: <p>Oops! Error occurred!</p>,
    onError: (err) => console.log(err),
  },
})(lazy(() => import('./components/LazyComponent')));

const App = () => {
  return <LazyComponent />;
};

export default App;

With Context configuration

• Set DynamicProvider (if you want to use the same suspense fallback and error boundary config for all lazy components wrapped in withDynamic HOC):

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { DynamicProvider } from 'react-with-dynamic';

import App from './App';

ReactDOM.render(
  <DynamicProvider
    suspenseFallback={<p>Loading...</p>}
    errorBoundaryProps={{
      fallback: <p>Oops! Error occurred!</p>,
      onError: (err) => console.log(err),
    }}
  >
    <App />
  </DynamicProvider>,
  document.getElementById('root')
);

• Then use withDynamic:

// App.js

import React from 'react';
import { withDynamic } from 'react-with-dynamic';

const LazyComponent = withDynamic()(
  lazy(() => import('./components/LazyComponent'))
);

const App = () => {
  return <LazyComponent />;
};

export default App;

License

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

1.0.0-beta.1.1

4 years ago

1.0.0-beta.1

4 years ago

1.0.0-beta.0

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago

0.0.0

4 years ago