0.0.4 • Published 4 years ago
react-with-dynamic v0.0.4
react-with-dynamic (WIP)
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-recompose.0
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